开发微信小程序的时候，经常要遇到如上图这样的，保存小程序二维码图片的分享功能。

网上找了很多都没有具体的写法，于是自己看官方文档写了一个，分享一下。

首先，需要在 wxml 中 创建一个 画板 canvas 。

wxml :

view class=' more ' bind tap=' savegimagetophotosalbum '保存图片/view //保存图片按钮canvas canvas-id=' share ' style=' width :100 VW；'height :90 VH ' hidden=' { { canvasHidden } } '/canvasHidden//这里的画布构成形容词后面要用的上//风格里的宽高要用上，不设置宽高画板会失效//canvasHidden。是控制画板显示隐藏的参数，画板直接设置不显示，会导致失效

data :

数据： { canvashidden : true，//设置画板的显示与隐藏，画板不隐藏会影响页面正常显示avatarUrl: ' '，//用户头像昵称： ' ',//用户昵称wxappname :应用程序。全球数据。wxappname，//小程序名称shareImgPath: ' '，屏幕宽度： ' ',//设备屏幕宽度描述： app。全球数据。描述，//奖品描述文件路径： ' ',//头像路径}，

js :

onLoad:函数（选项)那=这个var userInfo，昵称，avatarUrl //获取用户信息，头像，昵称之类的数据wx。GetUserInfo({ success : function(RES){ console。日志(RES)；用户信息=res.userInfo昵称=userInfo。昵称头像网址=用户信息。头像网址。setdata({ avatar URL : RES . UserInfo。头像网址，昵称： RES . userInfo。昵称，})wx。下载文件({ URL : RES . userInfo。头像网址})})//获取用户设备信息，屏幕宽度wx。getsystem info({ success : RES={ that。setdata({ screen width : RES . screen width })控制台。记录(那个。数据。screenwidth)})//定义的保存图片方法saveImageToPhotosAlbum:函数(){ wx.showLoading({ title: '保存中.'，那=这个//设置画板显示，才能开始绘图那个。setdata({ canvashidden : false })var unit=that。数据。屏幕宽度/375 var路径1='./images/bg3.png' var avat

arUrl = that.data.avatarUrl console.log(avatarUrl + "头像") var path2 = "../images/award.png" var path3 = "../images/qrcode.png" var path4 = "../images/headborder.png" var path5 = "../images/border.png" var unlight = "../images/unlight.png" var nickName = that.data.nickName console.log(nickName + "昵称") var context = wx.createCanvasContext('share') var description = that.data.description var wxappName = "来「 " + that.data.wxappName + " 」试试运气" context.drawImage(path1, 0, 0, unit * 375, unit * 462.5) // context.drawImage(path4, unit * 164, unit * 40, unit * 50, unit * 50) context.drawImage(path2, unit * 48, unit * 120, unit * 280, unit * 178) context.drawImage(path5, unit * 48, unit * 120, unit * 280, unit * 178) context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32) context.drawImage(unlight, unit * 178 , unit * 145, unit * 22, unit * 32) context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32) context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32) context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32) context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32) context.drawImage(path3, unit * 20, unit * 385, unit * 55, unit * 55) // context.drawImage(path4, 48, 200, 280, 128) context.setFontSize(14) context.setFillStyle("#999") context.fillText("长按识别小程序", unit * 90, unit * 408) context.fillText(wxappName, unit * 90, unit * 428) //把画板内容绘制成图片，并回调 画板图片路径 context.draw(false, function () { wx.canvasToTempFilePath({ x: 0, y: 0, width: unit * 375, height: unit * 462.5, destWidth: unit * 375, destHeight: unit * 462.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 }) } }) } }) }); },