微信小程序用canvas画图并分享

最近开始做微信小程序，有这样一个需求：

从列表页进入详情，在每一个详情页面去分享，分享出来的图片是带有当前详情数据的图片

如下图的列表：

分享出来的样子：

解决方案和思路：canvas画图生成图片

上代码：
【html部分】

<canvas style='width:{{canvasWidth}}px;height:{{canvasHeight}}px' canvas-id='myCanvas'></canvas>
<button open-type='share'>分享</button>

【js部分】

var ctx = "" // 用于获取canvas
var leftMargin = "" //文字距离左边边距
var topMargin = "" //文字距离右边边距
Page({/*** 页面的初始数据*/data: {title: '人人车司机',salary: '500-8000元/月',rtype: '日结',rmoney: '20元',canvasWidth: '', // canvas宽度canvasHeight: '', // canvas高度imagePath: '' // 分享的图片路径},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = thisvar sysInfo = wx.getSystemInfo({success: function (res) {that.setData({//设置宽高为屏幕宽，高为屏幕高的80%，因为文档比例为5:4canvasWidth: res.windowWidth,canvasHeight: res.windowWidth * 0.8})leftMargin = res.windowWidthtopMargin = res.windowWidth * 0.8},})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {ctx = wx.createCanvasContext('myCanvas')this.addImage()this.tempFilePath()},//画背景图addImage: function () {var context = wx.createContext();var that = this;var path = "/images/share.jpg";//将模板图片绘制到canvas,在开发工具中drawImage()函数有问题，不显示图片//不知道是什么原因，手机环境能正常显示ctx.drawImage(path, 0, 0, this.data.canvasWidth, this.data.canvasHeight);this.addTitle()this.addRtype()this.addRmoney()this.addSalary()ctx.draw()},//画标题addTitle: function (){var str = this.data.titlectx.font = 'normal bold 20px sans-serif';ctx.setTextAlign('center'); // 文字居中ctx.setFillStyle("#222222");ctx.fillText(str, this.data.canvasWidth/2,65)},// 画返费方式addRtype: function () {var str = this.data.rtypectx.setFontSize(16)ctx.setFillStyle("#ff4200");ctx.setTextAlign('left');ctx.fillText(str, leftMargin * 0.35, topMargin * 0.4)},// 画返费金额addRmoney: function () {var str = this.data.rmoneyctx.setFontSize(16)ctx.setFillStyle("#222");ctx.setTextAlign('left');ctx.fillText(str, leftMargin * 0.35, topMargin * 0.5)},// 画薪资addSalary: function () {var str = this.data.salaryctx.setFontSize(16)ctx.setFillStyle("#222");ctx.setTextAlign('left');ctx.fillText(str, leftMargin * 0.35, topMargin * 0.61)},/*** 用户点击右上角分享*/onShareAppMessage: function (res) {// return eventHandler接收到的分享参数return {title: this.data.title,path: '/pages/test/test',imageUrl: this.data.imagePath};},//导出图片tempFilePath: function(){let that = this;wx.canvasToTempFilePath({canvasId: 'myCanvas',success: function success(res) {wx.saveFile({tempFilePath: res.tempFilePath,success: function success(res) {that.setData({imagePath: res.savedFilePath});}});}});},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {}})

微信小程序用canvas画图并分享相关推荐

微信小程序使用canvas画图并保存到手机相册踩坑总结
接到个项目做微信小程序的,需要将手机中的页面保存到手机相册中,效果图如下首先想到的就是利用canvas画图然后在保存到相册,看起来很简单网上也有很多例子,但都不完整,很多网友分享的都在半吊子工程,只 ...
微信小程序之canvas画图
开题前几天接到个需求,长按图片保存到相册,该图片上有用户头像和昵称以及对应的二维码:那这就不能直接当作图片来操作了,要先把整体图片画出来:我当时用的是canvas.效果图如下: canvas dra ...
微信小程序使用canvas画海报分享图
项目场景: 很多小程序都会有一些分享海报的需求.因为我这边之前一直都是后端直接生成一张图片然后返回了的,我前端直接把路径放上去就可以了.但是,有时候后端没直接生成海报,而是只生成了一个二维码,这时候就 ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
html5绘制图形幸运大转盘,微信小程序利用canvas 绘制幸运大转盘功能
小程序对 canvas api 跟h5的不太一致 ,所以这个搞的比较久,不多说,先贴代码 Page({ /** * 页面的初始数据 */ data: { awardsConfig: {}, resta ...
微信小程序使用canvas绘制二维码实现跳转小程序
开始接到这个需求的时候,我查阅文档获取小程序码 | 微信开放文档发现两种途径需要后端在服务器上调用接口拿到二维码,因为调用的 https://api.weixin.qq.com这个域名是不允许上白 ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序Excel生成下载浏览分享
微信小程序Excel生成下载浏览分享完整流程遇到的小问题完整流程主要是为了实现小程序前端从后端下载excel文件并浏览和分享excel文件给其他用户主要实现步骤:通过后端返回的字节流 : w ...
解决了：微信小程序使用canvas绘制倒计时圆圈和数字居中的实现
微信小程序使用canvas绘制倒计时圆圈和数字居中的实现 1.显示结果 2.过程: (1)wxml + css <view style="backg ...

微信小程序用canvas画图并分享

微信小程序用canvas画图并分享相关推荐

最新文章

热门文章