1.效果图

2.hidden是用来隐藏显示图层的prurl是生成出来的图片临时路径

data:{prurl:'',hidden:true}

3.核心JS代码

getQr:function(){varthat=thiswx.showLoading({title:'生成二维码中...',})if(that.data.prurl!=''){that.setData({hidden:false})wx.hideLoading()}else{wx.request({url:app.globalData.url+'/wx/getQr/'+app.globalData.openId,header:{'content-type':'application/json'},success:function(res){//app.globalData.userQr=res.data;that.setData({userQr:res.data});},complete:()={wx.downloadFile({url:app.globalData.userInfo.avatarUrl,success:function(res1){//缓存头像图片that.setData({portrait_temp:res1.tempFilePath})},complete:()={that.drawImage()wx.hideLoading()}})}})}//wx.navigateTo({//url:'../wxqr/wxqr'//})},drawImage:function(){varthat=thisconstfsm=wx.getFileSystemManager();//传入二维码base64base64src(this.data.userQr).then(function(data){constctx=wx.createCanvasContext('img-canvas')//底图ctx.drawImage('/image/tg.png',0,40,307,441)//文字ctx.setTextAlign('center')//文字居中ctx.setFillStyle('#000000')//文字颜色：黑色ctx.setFontSize(18)//文字字号：22pxctx.fillText(that.data.user.name,307/2,120)//文字ctx.setTextAlign('center')//文字居中ctx.setFillStyle('#D4D4D4')//文字颜色：黑色ctx.setFontSize(14)//文字字号：22pxctx.fillText('长按扫描小程序',307/2,400)//小程序码constqrImgSize=180//第一个数字是左边距第二个参数上边距ctx.drawImage(data,(300-qrImgSize)/2,180,qrImgSize,qrImgSize)//画圆的代码需要放在最后不然会导致其他代码无法执行//下面是先定位要开个圆形的位置，160和45分别就是圆的圆心的x坐标和y坐标，40是半径，后面的两个参数就是起始和结束，这样就能画好一个圆了ctx.arc(155,45,40,0,2*Math.PI);ctx.closePath();//下面就裁剪出一个圆形了ctx.clip();//头像ctx.drawImage(that.data.portrait_temp,115,5,80,80)ctx.restore();ctx.stroke()ctx.draw(false,function(){//生成分享图wx.canvasToTempFilePath({canvasId:'img-canvas',success:function(res){console.info(res.tempFilePath)that.setData({prurl:res.tempFilePath,hidden:false})}})})})},//保存图片到本地saveCanvas:function(){varthat=thiswx.saveImageToPhotosAlbum({filePath:that.data.prurl,success(res){wx.showModal({content:'图片已保存到相册，赶紧晒一下吧~',showCancel:false,confirmText:'好的',confirmColor:'#333',success:function(res){if(res.confirm){that.closeCanvas()}}})}})},closeCanvas:function(){/*该隐藏的隐藏*/this.setData({hidden:true})}

4.上面方法调用的一个base64的工具，如果小程序二维码可以有远程路径地址的话可以不需要。

constfsm=wx.getFileSystemManager();constFILE_BASE_NAME='tmp_base64src';constbase64src=function(base64data){returnnewPromise((resolve,reject)={const[,format,bodyData]=/data:image/(w+);base64,(.*)/.exec(base64data)||[];if(!format){reject(newError('ERROR_BASE64SRC_PARSE'));}constfilePath=`${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;constbuffer=wx.base64ToArrayBuffer(bodyData);fsm.writeFile({filePath,data:buffer,encoding:'binary',success(){resolve(filePath);},fail(){reject(newError('ERROR_BASE64SRC_WRITE'));},});});};exportdefaultbase64src;

5.html代码

canvascanvas-id="img-canvas"class='canvas'/canvas!--预览分享图这里就是上图展示的效果--!--刚开始是隐藏的生成分享图之后显示,用一个布尔变量来控制这里的样式大家看图就写出来了--viewhidden='{{hidden}}'class='preview'bindtap='cancel'imagesrc='{{prurl}}'mode='widthFix'/imageviewbuttontype='primary'size='mini'bindtap='saveCanvas'保存分享/buttonbuttontype='primary'size='mini'bindtap='closeCanvas'关闭/button/view/view