开发微信小程序的时间，，，，
，
，经常要遇到如上图这样的，，，，
，
，生涯小程序二维码图片的分享功效。。。。

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

　　wxml :

　　生涯图片 //生涯图片按钮

　　//这里的 canvas-id 后面要用的上。。。。

　　//style里的宽高要用上，，，，
，
，不设置宽高画板会失效。。。。

　　//canvasHidden是控制画板显示隐藏的参数，，，，
，
，画板直接设置display none，，，，
，
，会导致失效。。。。

　　data :

　　data: {

　　canvasHidden:true, //设置画板的显示与隐藏，，，，
，
，画板不隐藏会影响页面正常显示

　　avatarUrl: '', //用户头像

　　nickName: '', //用户昵称

　　wxappName: app.globalData.wxappName, //小程序名称

　　shareImgPath: '',

　　screenWidth: '', //装备屏幕宽度

　　description: app.globalData.description, //奖品形貌

　　FilePath:'', //头像路径

　　},

　　js :

　　onLoad: function (options) {

　　var that = this

　　var userInfo, nickName, avatarUrl

　　//获取用户信息，，，，
，
，头像，，，，
，
，昵称之类的数据

　　wx.getUserInfo({

　　success: function (res) {

　　console.log(res);

　　userInfo = res.userInfo

　　nickName = userInfo.nickName

　　avatarUrl = userInfo.avatarUrl

　　that.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: '生涯中...',

　　})

　　var that = this;

　　//设置画板显示，，，，
，
，才华最先绘图

　　that.setData({

　　canvasHidden: false

　　})

　　var unit = that.data.screenWidth / 375

　　var path1 = "../images/bg3.png"

　　var avatarUrl = 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

　　})

　　}

　　})

　　}

　　})

　　});

　　},

小程序工具提供多类型商城/门店小程序制作，，，，
，
，可视化编辑 1秒天生5步上线。。。。通过拖拽、拼接？？榻峁剐〕绦蛏坛且趁，，，，
，
，所看即所得，，，，
，
，只需要美工就能做出细腻商城。。。。