yimei_spa/pages/invitationDetails/poster/poster.js

// pages/invitationDetails/poster/poster.js
import QRCode from '../../../utils/weapp-qrcode.js'
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    shareImage: "https://we-spa.oss-cn-shenzhen.aliyuncs.com/wxapp/20220811/%E4%BA%8C%E5%9B%BE/%E5%9B%BE%E7%89%87/%E9%82%80%E8%AF%B7%E6%B4%BB%E5%8A%A8%20%E5%A4%87%E4%BB%BD%202%402x.png",
    bgImage: '',
    qrcode_content: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      qrcode_content: getApp().invite_id 
    })
    console.log(this.data.qrcode_content,'options.qrcode_content');
    this.setQrcode()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生成动态二维码
   */
  setQrcode() {
    new QRCode('myQrcode', {
      text: this.data.qrcode_content,
      width: 75,
      height: 75,
      padding: 0, // 生成二维码四周自动留边宽度，不传入默认为0
      correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
      callback: (res) => {
        this.setData({
          qrCode: res.path
        })
        console.log(res, 'res');
        // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看需求
      }
    })
  },
  /**
   * 背景图转存本地（小程序drawImage不识别cdn图片）
   */
  onSaveAlbum() {
    const that = this
    wx.downloadFile({
      url: this.data.shareImage,
      success(res) {
        console.log(res.tempFilePath, 'res.tempFilePath');
        that.setData({
          bgImage: res.tempFilePath
        })
        that.generateImage()
      }
    })
  },
  /**
   * 画图
   */
  generateImage() {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.drawImage(this.data.bgImage, 0, 0, 610, 1168)
    ctx.drawImage(this.data.qrCode, 230, 944, 150, 150)
    ctx.draw(true, () => {
      let that = this
      // 获取图片路径
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 610,
        height: 1168,
        destWidth: 610 * 2,
        destHeight: 1168 * 2,
        canvasId: 'myCanvas',
        success(res) {
          console.log(res, '图片');
          that.setData({
            pictureUrl: res.tempFilePath,
          })
          that.saveImage()
        }
      })
    })
  },
  /**
   * 保存到本地
   */
  saveImage() {
    wx.showToast({
      title: '保存成功'
    })
    wx.saveImageToPhotosAlbum({
      filePath: this.data.pictureUrl,
      success: (res) => {
        wx.showToast({
          title: '保存成功',
          duration: 500,
        })
      },
      fail: (err) => {
        wx.showToast({
          title: '获取权限失败',
          duration: 1000,
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})