小程序制作海报

<view class="container log-list">
    <canvas type="2d" id="myCanvas" style="width: 400px; height: 500px;"></canvas>
    <button type="primary" bindtap="handleExport">保存为图片</button>
</view>

// logs.js
const util = require('../../utils/util.js')

Page({
  onReady() {
    
  },
  handleExport() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr


        //绘制背景图片和文字

        
       
        const bg = canvas.createImage()
        bg.src = 'https://game.gtimg.cn/images/lol/act/img/skin/big516000.jpg';
        bg.onload = (res) => {
          ctx.drawImage(bg, 0, 0, 700, 600)
          ctx.fillStyle = "#000000"
          ctx.font = "50px sans-serif"
          ctx.fillText("微信小程序海报分享",40, 800, 200) 
        }

        //二维码
        const QrCode = canvas.createImage()
        QrCode.src = 'https://src.onlinedown.net/images/xcs/10/2017-09-21_59c373d905179.jpg'

        QrCode.onload = () => {
          ctx.drawImage(QrCode, 300, 800, 200, 200)
        }

        //延迟导出图片
        setTimeout(() => {
          wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: 500,
            height: 700,
            destWidth: 500,
            destHeight: 700,
            canvas: canvas,
            success(res) {
              console.log(res,'导出图片成功')
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(info) {
                  console.log(info)
                 }
              })
            },
            fail(err) {
              console.log(err)
            }
          })
        },500)
      })
  }
  
})