博客

一张背景图加一个二维码的图片

<!-- 在页面加载的时候获取到了保存到data了, 所以这里调用了data的宽高; 然后这个宽高在开发中页面是显示不下的, 所以要缩放, 用zoom -->
  <canvas canvas-id="canvasPoster" style="width:{{width}}px;height:{{height}}px;zoom:40%;position:absolute;top:-20000px;"></canvas>
  

showDialog(e) {
    // console.log(e.target.dataset.items)
    this.setData({
      qrcodeImg: e.target.dataset.items.path    //  当前要保存的二维码路径
    })
    let that = this
    //获取文件管理器对象
    const fs = wx.getFileSystemManager()
    //文件保存路径
    const Imgpath = wx.env.USER_DATA_PATH + '/qrcodeImg' + '.png'
    //base64图片文件
    let imageSrc = that.data.qrcodeImg.replace(/^data:image\/\w+;base64,/, '')

    //写入本地文件
    fs.writeFile({
      filePath: Imgpath,
      data: imageSrc,
      encoding: 'base64',
      success(res) {
        console.log(res, Imgpath)
        that.drawPoster(Imgpath)   //  转化成本地路径绘制海报（base64真机测试不显示）
      }
    })
    
    this.dialog.showDialog();  // 打开弹框  选择保存海报
  },
drawPoster(qrcodeImg) {
    let that = this
    let ctx = wx.createCanvasContext('canvasPoster', this);
    //插入图片
    ctx.drawImage(that.data.localImg, 0, 0, that.data.width, that.data.height);//宽高和画布一致

    //插入二维码
    ctx.drawImage(qrcodeImg, 140, 290, 360, 360);

    //插入内容完了上屏
    ctx.draw();

    //然后生成一个保存用的临时地址, 因为安卓机兼容问题, 所以方法要延迟.
    setTimeout(() => {
      wx.canvasToTempFilePath({
        canvasId: 'canvasPoster',
        x: 0,
        y: 0,
        width: that.data.width,
        height: that.data.height,
        destWidth: that.data.width,
        destHeight: that.data.height,
        success: res => {
          let path = res.tempFilePath  //获取到了临时地址
          console.log(path, "获取到了临时地址")
          that.setData({
            tempFilePath: path
          })
        }
      });
    }, 200);
  }