小程序生成海报保存分享图片完全指南（包括：头像，文字）

在小程序中生成海报（包括用户头像和自定义文字）并且保存到本地

利用canvas画布，把用户头像和自定义文字定位好，用户点击按钮保存到本地

解决方案：判断到屏幕尺寸，传到wxml 里面

解决方案：canvas直接支持远程图片，不需要使用这个api

• canvas

• wx.createCanvasContext

• wx.canvasToTempFilePath

• Promise

注意这里的宽度是100%，响应式，海报的高posterHeight 是从js里面动态计算的

data: {   motto: 'Hello World',   hidden: true,   userInfo: {},   hasUserInfo: false,   windowWidth: '',   posterHeight: '', }, onLoad: function () {   const poster = {     "with": 375,     "height": 587   }   const systemInfo = wx.getSystemInfoSync()   let windowWidth = systemInfo.windowWidth   let windowHeight = systemInfo.windowHeight   let posterHeight = parseInt((windowWidth / poster.with) * poster.height)   this.setData({     windowWidth: windowWidth,     posterHeight: posterHeight   }) }

  const that = this   // 图片路径   const imagePath = '../../static/image/common/'   let bgimgPromise = new Promise(function (resolve, reject) {     console.log('data', that.data)     wx.getImageInfo({       src: imagePath + "base.png",       success: function (res) {         resolve(res);       }     })   });

初始化的时候，调取，一定在生成海报之前
此处可以存储本地，或使用状态都可以

wxml

// 可以从后端接口获取 或 官方本身远程地址     开始答题（获取用户信息）

js

  getUserInfo: function (e) {     app.globalData.userInfo = e.detail.userInfo     let userInfo = e.detail.userInfo     console.log('userInfo', userInfo)     // 更新用户信息     // api.post('更新用户信息的url', userInfo)     this.setData({       userInfo: e.detail.userInfo,       hasUserInfo: true     })   },

wxml

bgimgPromise.then(res => {       console.log('Promise.all', res)       const ctx = wx.createCanvasContext('shareImg')       ctx.width = windowWidth       ctx.height = posterHeight       console.log(windowWidth, posterHeight)       // 背景图       ctx.drawImage('../../' + res[0].path, 0, 0, windowWidth, posterHeight, 0, 0)       // 头像       ctx.drawImage(that.data.userInfo.avatarUrl, 48, 182, 58, 58, 0, 0)       ctx.setTextAlign('center')       ctx.setFillStyle('#000')       ctx.setFontSize(22)       // ctx.fillText('分享文字2：stark.wang出品', 88, 414)       ctx.fillText('分享文字1我的博客：https://shudong.wang', 55, 414)       ctx.stroke()       ctx.draw()     })

onLoad: function () {   share: function () {     var that = this     wx.showLoading({       title: '正在制作海报。。。'     })     new Promise(function (resolve, reject) {       wx.canvasToTempFilePath({         x: 0,         y: 0,         width: 444,         height: 500,         destWidth: 555,         destHeight: 666,         canvasId: 'starkImg',         success: function (res) {           console.log(res.tempFilePath);           that.setData({             prurl: res.tempFilePath,             hidden: false           })           wx.hideLoading()           resolve(res)         },         fail: function (res) {           console.log(res)         }       })     }).then(res => {       console.log(res)       this.save()     })   } }

原文链接：https://segmentfault.com/a/1190000016039298