微信小程序canvas 生成海报保存到相册

商城小程序的分享商品生成小海报页面，支持用户保存图片分享到朋友圈，需要用到画布。写此页面时企业微信将支持小程序，但部分功能需特别适配。如企业微信小程序不支持绘制圆角矩形。

以梦芭莎小程序为例

小程序码靠id 传给后台获取，接下来就是绘制以及保存到相册的问题，海报大小要随屏幕自适应。

picuurl：商品图片地址
mminaurl：小程序码地址

先获取图片的临时路径
js代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

getFilepath: function(picuurl,picprice,picttitle,mminaurl){ let that=this; var filePath,minaPath; wx.downloadFile({ // 获取图片临时地址 url:picuurl, success: function(res){ if (res.statusCode == 200){ filePath=res.tempFilePath; // 获取小程序码临时地址 wx.downloadFile({ url:mminaurl, success: function(res){ if (res.statusCode == 200){ minaPath=res.tempFilePath; that.getCanvas(filePath,picprice,picttitle,minaPath); } } }) } } }) }

wxml代码

1 2 3 4 5

 

将下方绘制的按钮与上方海报的绘制分离，利于企业微信适配。

js代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

getCanvas: function(filePath,picprice,picttitle,minaPath){ var img=filePath; let that=this; // 获取屏幕宽高 var wth;// 屏幕宽 wx.getSystemInfo({ success:function(res){ wth=res.windowWidth; } }) // 下面有部分省略 var canvasW=wth*0.84;// 画布宽 var context = wx.createCanvasContext('canvpos');// 创建并返回绘图上下文 context.drawImage(img,0,0,canvasW,canvasW)// Ⅰ、商品图 context.setFontSize(25) context.setFillStyle('white') var detailW=0.36*wth;// 商品描述位置X var detailH=redH/2-15+canvasW+10;// 第一行商品描述位置Y context.fillText(picttitle,detailW,detailH) that.setData({ widd:canvasW, heii:wholeH// 第一个画布高 }) context.stroke() context.draw(false) that.sharetoDude(canvasW,wth);// 绘制画布二，传参画布宽、屏幕宽 }

 

下方按钮渐变色，在微信小程序中绘制圆角，在企业微信小程序中绘制图片代替。

js代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

sharetoDude: function(canvasW,wth){ let that=this; // 获取画布一宽度(因代码顺序执行，这时widd 将已存在) var pinkH=0.128*wth;// 粉条高度为0.128*屏幕宽 that.setData({ pinh:pinkH }) // 画笔2 var ctx = wx.createCanvasContext('savetoDude');// 创建并返回绘图上下文 let x=0; let y=0; let r = parseInt(wth* 0.064); let w=canvasW; let h=pinkH; // 绘制圆角矩形 if(wx.canIUse('canvasContext.arcTo')){ ctx.beginPath(); ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); const grd = ctx.createLinearGradient(0, 0, canvasW, 0) grd.addColorStop(0, '#e3675e'); grd.addColorStop(0.55,'#dd3a2d'); grd.addColorStop(1, '#db3f21'); ctx.setFillStyle(grd) ctx.fill(); ctx.setFontSize(16) ctx.setFillStyle('#FFFFFF') ctx.setTextAlign('center') ctx.fillText("保存到相册ccc",canvasW/2,pinkH/2+6)// 粉条中间的分享 }else{ // 对应企业微信绘制图像 var savepic='../../res/images/save_pic.png'; ctx.drawImage(savepic,0,0,canvasW,pinkH) } ctx.draw() }

 

保存图片到相册
js代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

saveCanvas: function(){ let that = this; wx.showLoading({ title: '生成图片中...' }) wx.canvasToTempFilePath({ x: 0, y: 0, canvasId: 'canvpos', success: function (res) { that.setData({ canvasTemppath: res.tempFilePath, }) wx.hideLoading() wx.saveImageToPhotosAlbum({ filePath: that.data.canvasTemppath, success(res) { wx.showToast({ title: '保存成功', icon: 'success', duration: 1500 }), that.closePoster(); } }) }, fail: function (res) { console.log(res) } }) }

 

完成。

转载：https://gaea2.github.io/2018/06/13/%E4%BD%BF%E7%94%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%94%BB%E5%B8%83%E7%94%9F%E6%88%90%E6%B5%B7%E6%8A%A5/