小程序生成海报保存分享图片完全指南
在我们分享小程序时，会有一个图片式的海报，这种功能显示是如何显示的，下面小编为大家解答小程序生成海报保存分享图片完全指南
业务
在小程序中生成海报（包括用户头像和自定义文字）并且保存到本地
实现思路
利用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()
})
}
}
更新头像裁剪为圆形
ctx.save() // 对当前区域保存 ctx.beginPath() // 开始新的区域 ctx.arc(73, 224, 38, 0, 2 * Math.PI); ctx.clip(); // 从画布上裁剪出这个圆形 ctx.drawImage(res[1], 36, 186, 94, 94, 0, 0) // 把图片填充进裁剪的圆形 ctx.restore() // 恢复
上面是远程连接容易发生请求失败
把头像提前存到本地存储中解决
getImg: function () {
let avatarUrl = this.data.userInfo.avatarUrl
downLoadFile(avatarUrl).then((res) => {
console.log(res)
wx.saveFile({
tempFilePath: res.data.tempFilePath,
success: function (res) {
wx.setStorageSync('avatarUrl', res.savedFilePath)
}
})
})
},
获取头像
// 头像
let promiseAvatarUrl = new Promise(function (resolve, reject) {
resolve(wx.getStorageSync('avatarUrl'))
}).catch(res=>{
console.log('catch',res)
});
背景还是不变
const that = this
let promiseBdImg = new Promise(function (resolve, reject) {
console.log('data', that.data)
wx.getImageInfo({
src: imagePath + "base1.png",
success: function (res) {
console.log('promiseBdImg', res)
resolve(res);
}
})
此时生成canvas更新
Promise.all([
promiseBdImg, promiseAvatarUrl
]).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.save() // 对当前区域保存
ctx.beginPath() // 开始新的区域
ctx.arc(73, 224, 38, 0, 2 * Math.PI);
ctx.clip(); // 从画布上裁剪出这个圆形
ctx.drawImage(res[1], 36, 186, 94, 94, 0, 0) // 把图片填充进裁剪的圆形
ctx.restore() // 恢复
ctx.setTextAlign('center')
ctx.setFillStyle('#000')
ctx.setFontSize(22)
ctx.save()
ctx.beginPath();
ctx.fillText('作者：stark.wang', 545 / 2, 130)
ctx.fillText('我的博客：http://shudong.wang', 190, 414)
ctx.stroke()
ctx.draw()
})
以上是小程序生成海报保存分享图片完全指南，更多小程序开发内容，请查看本网站，谢谢。
多程序小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店
