let shareInfo = {
 headerImg: 'tempfilepath',
 bgImg: '本地路径的图片',
 qrcode: 'tempfilepath'
}
wx.navigateTo({
 url: '/pages/createPoster/main?shareInfo=' + JSON.stringify(shareInfo)
})

mounted () {
 const options = this.$root.$mp.query
 this.shareInfo= JSON.parse(options.shareInfo)
}
// 如果是通过微信开发工具直接开发则在onLoad函数中获取options
onLoad (options) {
 const shareInfo = JSON.parse(options.shareInfo)
}

wx.getSystemInfo({
 success (res) {
 // 通过像素比计算出画布的实际大小（330x490）是展示的出来的大小
 this.width = 330 * res.pixelRatio
 this.height = 490 * res.pixelRatio
 }
})
// 结构样式



 
 保存图片

生成之前获取画布信息

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

关于微信小程序中怎么生成一个分享海报就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。