开发微信的时候，经常要遇到如上图这样的，保存小程序二维码图片的分享功能。
网上找了很多都没有具体的写法，于是自己看官方文档写了一个，分享一下。
首先，需要在wxml中创建一个画板canvas。
wxml:viewclass='more'bindtap='saveImageToPhotosAlbum'保存图片/view//保存图片按钮canvascanvas-id='share'style='width:100vw;height:90vh;'hidden='{{canvasHidden}}'/canvas//这里的canvas-id后面要用的上。//style里的宽高要用上，不设置宽高画板会失效。//canvasHidden是控制画板显示隐藏的参数，画板直接设置displaynone，会导致失效。data:data:{canvasHidden:true,//设置画板的显示与隐藏，画板不隐藏会影响页面正常显示avatarUrl:'',//用户头像nickName:'',//用户昵称wxappName:app.globalData.wxappName,//小程序名称shareImgPath:'',screenWidth:'',//设备屏幕宽度description:app.globalData.description,//奖品描述FilePath:'',//头像路径},js:onLoad:function(options){varthat=thisvaruserInfo,nickName,avatarUrl//获取用户信息，头像，昵称之类的数据wx.getUserInfo({success:function(res){console.log(res);userInfo=res.userInfonickName=userInfo.nickNameavatarUrl=userInfo.avatarUrlthat.setData({avatarUrl:res.userInfo.avatarUrl,nickName:res.userInfo.nickName,})wx.downloadFile({url:res.userInfo.avatarUrl})}})//获取用户设备信息，屏幕宽度wx.getSystemInfo({success:res={that.setData({screenWidth:res.screenWidth})console.log(that.data.screenWidth)}})//定义的保存图片方法saveImageToPhotosAlbum:function(){wx.showLoading({title:'保存中...',})varthat=this;//设置画板显示，才能开始绘图that.setData({canvasHidden:false})varunit=that.data.screenWidth/375varpath1="../images/bg3.png"varavatarUrl=that.data.avatarUrlconsole.log(avatarUrl+"头像")varpath2="../images/award.png"varpath3="../images/qrcode.png"varpath4="../images/headborder.png"varpath5="../images/border.png"varunlight="../images/unlight.png"varnickName=that.data.nickNameconsole.log(nickName+"昵称")varcontext=wx.createCanvasContext('share')vardescription=that.data.descriptionvarwxappName="来「"+that.data.wxappName+"」试试运气"context.drawImage(path1,0,0,unit375,unit462.5)//context.drawImage(path4,unit164,unit40,unit50,unit50)context.drawImage(path2,unit48,unit120,unit280,unit178)context.drawImage(path5,unit48,unit120,unit280,unit178)context.drawImage(unlight,unit82,unit145,unit22,unit32)context.drawImage(unlight,unit178,unit145,unit22,unit32)context.drawImage(unlight,unit274,unit145,unit22,unit32)context.drawImage(unlight,unit82,unit240,unit22,unit32)context.drawImage(unlight,unit178,unit240,unit22,unit32)context.drawImage(unlight,unit274,unit240,unit22,unit32)context.drawImage(path3,unit20,unit385,unit55,unit55)//context.drawImage(path4,48,200,280,128)context.setFontSize(14)context.setFillStyle("#999")context.fillText("长按识别小程序",unit90,unit408)context.fillText(wxappName,unit90,unit428)//把画板内容绘制成图片，并回调画板图片路径context.draw(false,function(){wx.canvasToTempFilePath({x:0,y:0,width:unit375,height:unit462.5,destWidth:unit375,destHeight:unit462.5,canvasId:'share',success:function(res){that.setData({shareImgPath:res.tempFilePath})if(!res.tempFilePath){wx.showModal({title:'提示',content:'图片绘制中，请稍后重试',showCancel:false})}console.log(that.data.shareImgPath)//画板路径保存成功后，调用方法吧图片保存到用户相册wx.saveImageToPhotosAlbum({filePath:res.tempFilePath,//保存成功失败之后，都要隐藏画板，否则影响界面显示。success:(res)={console.log(res)wx.hideLoading()that.setData({canvasHidden:true})},fail:(err)={console.log(err)wx.hideLoading()that.setData({canvasHidden:true})}})}})});},
作者：harbour链接：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。