微信小程序：生成广告海报

最新推荐文章于 2024-07-31 13:57:35 发布

彧子吱吱吱吱

最新推荐文章于 2024-07-31 13:57:35 发布

阅读量649

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/qq_36083613/article/details/113995838

版权

这篇博客介绍了如何结合wxml-to-canvas在微信小程序中生成带有小程序码的海报图片。首先，通过修改模板文件将小程序码与图片整合成海报样式，然后利用renderToCanvas方法渲染到canvas，并进一步转化为临时文件路径，最终实现保存图片功能。

摘要由CSDN通过智能技术生成

需求：小程序码+图片=海报
点击保存图片，打开微信进行扫描

生成小程序码（写了）
小程序码 + 图片 = 一张图片
点击保存图片（写了）

wxml-to-canvas微信开发文档
1.安装wxml-to-canvas

demo.js,修改模板文件，变成海报的对应样式，最主要的

const wxml = `

  <view class="container">
      <image class="img" src="/image/sharebg.jpg"></image>
  </view>
</view>
`

const style = {
  container: {
    width: 300,
    height: 200,
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#ccc',
    alignItems: 'center',
  },
  itemBox: {
    width: 80,
    height: 60,
  },
 
  text: {
    width: 80,
    height: 60,
    textAlign: 'center',
    verticalAlign: 'middle',
  },
  img: {
    width: '100',
    height: '100',
 
  }
}

module.exports = {
  wxml,
  style
}

const {wxml, style} = require('./demo.js')
Page({
  data: {
    src: ''
  },
  onLoad() {
    this.widget = this.selectComponent('.widget')
  },
  //渲染canvas，点击生成海报。
  renderToCanvas() {
    const p1 = this.widget.renderToCanvas({ wxml, style })
    p1.then((res) => {
      this.container = res
      this.extraImage()
    })
  },
  extraImage() {
    const p2 = this.widget.canvasToTempFilePath()
    p2.then(res => {
      this.setData({
        src: res.tempFilePath,
        width: this.container.layoutBox.width,
        height: this.container.layoutBox.height
      })
    })
  }
})