canva实现微信小程序商品分享海报

前言

使用canvas画布实现小程序分享海报功能

一、定义一个生成海报按钮

1.点击按钮生成海报
catchtap:handleShare 使用catch绑定阻止事件冒泡

<view class="poster_window "  catchtap="handleShare"><view class="poster_warp"><image src="/icons/posticon.png" mode="widthFix" lazy-load="true"></image><view class="post_text">生成海报</view></view>
</view>

二、定义一个生成海报的方法

1.调用wx.createSelectorQuery()获取页面节点信息以及使用canvas.getContext创建画布

代码如下（示例）：

/* 生成海报方法 */
data:{startDateTime:'', //开团时间endDateTime:'',//截团时间dateTime:'',//当前时间showShare:true,//显示分享海报newsImg:'',// 海报商品图postimg:'',goodsUrl:'',newText:'',canvas:'',ctx:'',dpr:'',Img:'',codeImg:''},onLoad: function () {this.creatImage()},
creatImage(){const query = wx.createSelectorQuery()query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {const canvas = res[0].nodeconst ctx = canvas.getContext('2d')const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].width * dprcanvas.height = res[0].height * dprctx.scale(dpr, dpr)ctx.fillStyle = '#ffffff'//背景颜色ctx.fillRect(0, 0, 300, 485)this.setData({canvas,ctx,dpr})this.drawHeader()this.goodsImg()this.price()this.goodsname()this.codeImg()})},

2.海报顶部图片

代码如下（示例）：

/* 顶部图片 */drawHeader(){let {canvas,ctx} = this.data const headImg = canvas.createImage()headImg.src = '/images/pbg.png'headImg.onload = () =>{ctx.drawImage(headImg, 0, 0, 300, 50)}},

3.海报商品图片

代码如下（示例）：

/* 商品图片 */
goodsImg(){let {canvas,ctx,endDateTime} = this.datalet oldTime = new Date(endDateTime)var month = (oldTime.getMonth()+1)<10?'0'+(oldTime.getMonth()+1):(oldTime.getMonth()+1)var date = (oldTime.getDate())<10?'0'+(oldTime.getDate()):(oldTime.getDate())var hours = (oldTime.getHours())<10?'0'+(oldTime.getHours()):(oldTime.getHours())var minutes = (oldTime.getMinutes())<10?'0'+(oldTime.getMinutes()):(oldTime.getMinutes())var DateTime = month+ '月'+date+ '日' + ' '+hours+':'+minutesconst goodsImg = canvas.createImage()goodsImg.src = this.data.goodsUrlgoodsImg.onload = () =>{ctx.drawImage(goodsImg,10,60,280,280)var grd=ctx.createLinearGradient(0,0,170,0);grd.addColorStop(0,"#F53C28");grd.addColorStop(1,"#79235E");ctx.fillStyle = grd;ctx.fillRect(10,310,220,30);ctx.fillStyle = '#ffffff';ctx.font="14px Arial";ctx.fillText("限时抢购",15,330);ctx.fillStyle = '#ffffff';ctx.font="14px Arial";ctx.fillText(DateTime+"截团",90,330);ctx.beginPath()ctx.moveTo(80,320);ctx.lineTo(80,332);ctx.lineWidth=1.5;ctx.strokeStyle="#ffffff";ctx.stroke()}},

4.商品价格

代码如下（示例）：

/* 价格 */price(){let {ctx} = this.datactx.fillStyle = "#F53C28"; ctx.font="18px Arial";ctx.fillText("￥",10,375);ctx.font="22px Arial";ctx.fillText(this.data.minPrice（商品价格）+' 起',30,375);},

5.商品名称

代码如下（示例）：

goodsname(){let {ctx,newText} = this.datalet chr = newText.split("");let temp = "";let row = [];ctx.font="16px Arial";ctx.fillStyle = "#000000";for (var a = 0; a < chr.length; a++) {if (ctx.measureText(temp).width < 155) {temp += chr[a];}else {a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比row.push(temp);temp = "";}}row.push(temp); if (row.length > 3) {var rowCut = row.slice(0, 3);var rowPart = rowCut[2];var test = "";var empty = [];for (var a = 0; a < rowPart.length; a++) {if (ctx.measureText(test).width < 220) {test += rowPart[a];}else {break;}}empty.push(test);var group = empty[0] + "..."//这里只显示两行，超出的用...表示rowCut.splice(2, 1, group);row = rowCut;}for (var b = 0; b < row.length; b++) {ctx.fillText(row[b], 10, 405 + b * 25, 300);}},

6.小程序二维码

代码如下（示例）：

 codeImg(){let {canvas,ctx} = this.dataconst codeImg = canvas.createImage()codeImg.src = this.data.codeImg//小程序二维码图片codeImg.onload = () =>{ctx.save()ctx.drawImage(codeImg, 200, 355, 85,85)ctx.restore()ctx.fillStyle = '#000000';ctx.font="12px Arial";ctx.fillText("长按扫码下单",207,460);}},

7.点击生成海报

代码如下（示例）：

/* 显示海报 */async handleShare(e){await showToast({title:'海报生成中...',icon:'loading'})setTimeout(() => {this.createImg()this.setData({showShare:false})}, 2000);},/* 生成图片 */createImg(){wx.canvasToTempFilePath({canvas: this.data.canvas,width: 300,height: 485,success:res=> {this.setData({postimg:res.tempFilePath})}})},