【微信小程序-原生开发】实用教程20 - 生成海报（实战范例为生成活动海报，内含生成指定页面的小程序二维码，保存图片到手机，canvas 系列教程）

  getPoster() {
    let detail = this.data.detail
    wx.navigateTo({
      url: '/pages/components/poster/index',
      success: function (res) {
        // 跳转页面时，将活动详情传递过去
        res.eventChannel.emit('sendData', {
          data: detail
        })
      }
    })
  },

  onLoad() {
    let that = this
    // 接收列表页传入的复杂数据--对象（详情）
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('sendData', function (res) {
      that.setData({
        detail: res.data
      })
      wx.showLoading({
        title: '生成中',
      })
      //开始生成海报
      that.getPoster()
    })
  },

  // 生成海报
  getPoster() {
    let that = this
    // 获取屏幕宽高
    wx.getSystemInfo({
      success(res) {
        that.drawCanvas(res.windowWidth, res.windowHeight)
      }
    })
  },

<canvas class="canvasClass" id="mycanvas" type="2d" />
 

Page {
  background-color: black;
}

.canvasClass {
  width: 80%;
  height: 80vh;
  margin: 40rpx auto
}

        // Canvas 画布的实际绘制宽高
        const width = windowWidth
        const height = windowHeight

        // 获取设备像素比
        const dpr = wx.getWindowInfo().pixelRatio

        // 初始化画布大小
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)

        // 清空画布
        ctx.clearRect(0, 0, width, height)

        // 绘制画布底色
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 解析活动封面图片
        let posterImgURL = detail.poster
        // 获取源图片宽高
        let posterImgInfo = await that.getImgInfo(posterImgURL)
        // 计算源图片的宽高比
        let posterImgRate = posterImgInfo.width / posterImgInfo.height
        // 计算出新的图片宽高（此处以宽为基准，按80%的宽等比例缩放图片）
        let newWidth = 0.8 * width
        let newHeight = 0.8 * width / posterImgRate

  // 获取图片信息
  getImgInfo(imgURL) {
    return new Promise((reslove) => {
      wx.getImageInfo({
        src: imgURL,
        success(res) {
          reslove(res);
        }
      })
    })
  },

        // 绘制文本 -- 水平居中（活动名称）
        let text1 = detail.title;
        ctx.fillStyle = "black";
        ctx.font = "bold 25px 微软雅黑";
        let y1 = width / 10 + newHeight + 50
        ctx.fillText(text1, that.getTextxPosition(ctx, width, text1), y1);

  // 获取居中文本的x坐标
  getTextxPosition(ctx, ctxWidth, text) {
    let textWidth = ctx.measureText(text).width;
    let xPosition = ctxWidth / 2 - textWidth / 2;
    return xPosition
  },

        // 绘制图片--活动封面图片
        let posterImg = canvas.createImage()
        posterImg.src = posterImgURL
        posterImg.onload = () => {
          ctx.drawImage(posterImg, (width - newWidth) / 2, width / 10, newWidth, newHeight)
        }

  // 生成小程序二维码
  async initCodeImg() {
    let {
      codeImgURL
    } = this.data

    if (!codeImgURL) {
      // 生成小程序二维码
      let codeImgID = await this.getCodeImg()
      // 云存储的图片，需要通过云id去换取外网访问链接
      let result = await wx.cloud.getTempFileURL({
        fileList: [codeImgID]
      })
      codeImgURL = result.fileList[0].tempFileURL
    }

    return codeImgURL
  },

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
}) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({
    // 页面路径
    page: event.path,
    // 参数
    scene: event.params,
  })
  let suffix = event.path.replace(/\//g, '_') + '_' + event.params
  // 在云存储生成图片
  const uploadResult = await cloud.uploadFile({
    // 图片存储路径
    cloudPath: `codeImgs/wxacode_${suffix}.jpg`,
    fileContent: wxacodeResult.buffer,
  })
  return uploadResult
}

  onLoad(options) {
    // 通过id获取详情（扫描小程序二维码时，id在scene里 ）
    let id = options.id || options.scene
    if (id) {
      this.setData({
        id: id
      })
      this.getDetail()
      return
    }
}

            // 生成图片
            wx.canvasToTempFilePath({
              canvas,
              success: res => {
                that.setData({
                  // 生成的图片临时文件路径
                  tempFilePath: res.tempFilePath
                })
              },
            })

<view class="btnBanner">
  <t-button style="margin-right: 40rpx;" block theme="light" capture-bind:tap="cancel" size="medium">取消</t-button>
  <t-button block capture-bind:tap="saveImg" theme="primary" size="medium">保存</t-button>
</view>