微信小程序合成海报_微信小程序生成海报实现方式

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

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

实现思路

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

注意事项 难点

小程序canvas不支持自定义宽高，反正我没找到，canvas画布大部分业务都需要全屏，响应式，至少宽100%解决方案：判断到屏幕尺寸，传到wxml 里面

远程图片不能直接使用 getImageInfo 获取，需要保存到本地解决方案：canvas直接支持远程图片，不需要使用这个api

先来个ui (嘿嘿！此图经过公司的设计授权过)

技术栈canvas

wx.createCanvasContext

wx.canvasToTempFilePath

Promise

实战

首先我们在wxml里面写一个canvas占位注意这里的宽度是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({