欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 15:33:03
需求:小程序码+图片=海报点击保存图片,打开微信进行扫描生成小程序码(写了)小程序码 + 图片 = 一张图片点击保存图片(写了)wxml-to-canvas微信开发文档1.安装wxml-to-canvasdemo.js,修改模板文件,变成海报的对应样式,最主要的const wxml = `

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

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

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

本文地址:https://blog.csdn.net/qq_36083613/article/details/113995838

相关标签: 小程序