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

业务

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

实现思路

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

注意事项 难点

小程序canvas不支持自定义宽高，反正我没找到，canvas画布大部分业务都需要全屏，响应式，至少宽100%

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

远程图片不能直接使用 getImageInfo 获取，需要保存到本地

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

技术栈

• canvas

• wx.createCanvasContext

• wx.canvasToTempFilePath

• Promise

实战

首先我们在wxml里面写一个canvas占位

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

<canvas canvas-id="starkImg" style="width:100%;height:{{posterHeight}}px;"></canvas>

根据屏幕动态计算海报的尺寸

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

// 可以从后端接口获取 或 官方本身远程地址     <button class="share" type="primary" open-type="getUserInfo" bindgetuserinfo="getUserInfo">开始答题（获取用户信息）</button>

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()     })   } }

结果

ok，如果能帮助你，请赞一个。

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