2023.07.25 |
admin | 137次围观
这篇文章给大家介绍微信小程序中怎么生成一个分享海报，内容非常详细微信小程序生成海报，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
let shareInfo = {
headerImg: 'tempfilepath',
bgImg: '本地路径的图片',
qrcode: 'tempfilepath'
}
wx.navigateTo({
url: '/pages/createPoster/main?shareInfo=' + JSON.stringify(shareInfo)
})
获取资源
在（0-2）中获取参数
我们公司的工程是通过mpvue搭建的微信小程序生成海报，获取方法是
mounted () {
const options = this.$root.$mp.query
this.shareInfo= JSON.parse(options.shareInfo)
}
// 如果是通过微信开发工具直接开发则在onLoad函数中获取options
onLoad (options) {
const shareInfo = JSON.parse(options.shareInfo)
}
画布的样式
由于在获取临时路劲保存图片的时候用一倍的canvas保存的图片会很模糊，我们需要对canvas画布进行多倍处理，一般二倍即可，太大了在Android上可能会出现问题
也可以以像素比为倍率，这样比较好处理，这里用的是像素比，具体如下
wx.getSystemInfo({
success (res) {
// 通过像素比计算出画布的实际大小（330x490）是展示的出来的大小
this.width = 330 * res.pixelRatio
this.height = 490 * res.pixelRatio
}
})
// 结构样式
保存图片
.canvas-poster{
background-color: #fafafa;
zoom: 50%; // 将画布缩小到50%（最好通过像素比进行缩小，像素比是2的话就是50%，如果不全是以像素比为标准，在生成图片的时候可能会出现四周黑边）
position: absolute;
left: -10000px; // 将画布隐藏在可视区域外
background: #206949;
}
生成之前获取画布信息
mounted () {
var query = wx.createSelectorQuery()
query.select('#canvasPoster').boundingClientRect((res) => {
// 返回值包括画布的实际宽高
this.drawImage(res)
}).exec()
}
生成逻辑
methods: {
drawImage (canvasAttrs) {
let ctx = wx.createCanvasContext('canvasPoster', this)
let canvasW = canvasAttrs.width // 画布的真实宽度
let canvasH = canvasAttrs.height //画布的真实高度
// 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatio
let headerW = 48 * this.systemInfo.pixelRatio
let headerX = (canvasW - headerW) / 2
let headerY = 40 * this.systemInfo.pixelRatio
let qrcodeW = 73 * this.systemInfo.pixelRatio
let qrcodeX = 216 * this.systemInfo.pixelRatio
let qrcodeY = 400 * this.systemInfo.pixelRatio
// 填充背景
ctx.drawImage(this.shareInfo.bgImg, 0, 0, canvasW, canvasH)
ctx.save()
// 控制头像为圆形
ctx.setStrokeStyle('rgba(0,0,0,.2)') //设置线条颜色，如果不设置默认是黑色，头像四周会出现黑边框
ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI)
ctx.stroke()
//画完之后执行clip()方法，否则不会出现圆形效果
ctx.clip()
// 将头像画到画布上
ctx.drawImage(this.shareInfo.headerImg, headerX, headerY, headerW, headerW)
ctx.restore()
ctx.save()
// 绘制二维码
ctx.drawImage(this.shareInfo.qrcode, qrcodeX, qrcodeY, qrcodeW, qrcodeW)
ctx.save()
ctx.draw()
setTimeout(() => {
//下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试
wx.canvasToTempFilePath({
canvasId: 'canvasPoster',
x: 13,
y: 13,
width: canvasW - 26,
height: canvasH - 26,
destWidth: canvasW - 26,
destHeight: canvasH - 26,
success: (res) => {
this.poster = res.tempFilePath
}
})
}, 200)
},
previewImg () {
if (this.poster) {
//预览图片，预览后可长按保存或者分享给朋友
wx.previewImage({
urls: [this.poster]
})
}
},
savePoster () {
if (this.poster) {
wx.saveImageToPhotosAlbum({
filePath: this.poster,
success: (result) => {
wx.showToast({
title: '海报已保存，快去分享给好友吧。',
icon: 'none'
})
}
})
}
}
}
关于微信小程序中怎么生成一个分享海报就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
发表评论