小程序canvas 简单配置 保存图片

 

提示 如果图片显示不出来的话 查看一下域名是否正确  图片是否转成本地图片

  <view class="poster" hidden="{{hidden}}">
    <canvas canvas-id="shareCanvas" style="width:604rpx;height:940rpx"></canvas>
    <view class="preservation">
      <view class="p_btn" bindtap="bindcanvas">
        保存到相册
      </view>
    </view>
  </view>

提示 图片要用本地地址 如果是后台返回的线上地址需要转换一下 

  // 获取二维码
  createQrCode() {
    const that = this;

    let data = {
      token: wx.getStorageSync('token'),
      store_id: that.data.id
    }
    $.Ajax('createQrCode', 'POST', data, res => {
      console.log(res)
      if (res.data.code == 1) {
        that.setData({
          qrcode: res.data.data
        })
        let qrcode = that.data.hostdata[1].hostimage
     
        let img =  that.data.storedetail.shop_images[1]；

         //转成本地图片

        let p1 = new Promise((resolve, reject) => {
          wx.getImageInfo({
            src: qrcode,
            success(res) {
              console.log(res)
              resolve(res.path)
            },
            fail(res) {
              console.log(res)
            }
          })
        })
        let p2 = new Promise((resolve, reject) => {
          wx.getImageInfo({
            src: img,
            success(res) {
              console.log(res)
              resolve(res.path)
            },
            fail(res) {
              console.log(res)
            }
          })
        })
        Promise.all([p1, p2]).then((result) => {
          console.log(result)     
          that.canvas(result[0],result[1])
          //['成功了', 'success']
        }).catch((error) => {
          console.log(error)
        })
       
      }
    })
  },

  // 画布
  canvas(qrcode,bgimg) {
    const ctx = wx.createCanvasContext('shareCanvas')
    // let img1 = this.data.baseUrl + this.data.storedetail.shop_images[1];
    // console.log(img1)
    let img = bgimg
    let img1 = qrcode;
    ctx.setFillStyle('white')//填充白色
    ctx.fillRect(0, 0, 604, 1060);
    ctx.drawImage(img, 0, 0, 302, 320);
    ctx.drawImage(img1, 108, 335, 85, 85); //二维码

    ctx.setTextAlign('center')//设置文字要垂直居中
    ctx.setFillStyle('#666666')//字体颜色
    ctx.setFontSize(10)//字体大小
    ctx.fillText("扫描二维码", 150, 440)//字体内容和位置
    ctx.fillText("查看店铺详情", 150, 455)//字体内容和位置
    ctx.draw()
  },

 

  // 保存
  bindcanvas() {
    wx.canvasToTempFilePath({
      canvasId: 'shareCanvas',
      success: function (res) {
        console.log(res)
        wx.downloadFile({
          url: res.tempFilePath,
          success(res) {
            console.log(res)
            if (res.statusCode == 200) {
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  console.log(res)
                }
              })
            }

          }
        })
      }
    })
  },