小程序画布合成二维码海报图，并保存到相册

小程序画布合成二维码海报图，并保存到相册

实现效果如下图：

步骤分析

1，先获取需要合成的海报和二维码。
2，获取图片的本地路径，如果图片不是网络连接则不需要此操作。
3，通过手机型号，根据屏幕的大小计算出海报的长宽比例，适配不同的手机。
4，操作小程序cavnas把二维码和海报，合成一张图。

设置好wxml页面

<button bindtap="canvasCode">海报合成</button>
<view class="haibao" style="width:100%;">
  <canvas class="canvas" canvas-id="codereport"  style="width:100%;height:{{ reportHeight }}px" bindtap="closeImg"></canvas>
  <button class="savecanvas" data-url="{{ temporarycodeUrl }}" bindtap='saveImg'>保存图片</button>
</view>

实现效果逻辑代码

这里获取的海报图和二维码图片以网络链接为例子，手机型号以iphone 6s为标准做适配
微信内置接口wx.getImageInfo({})用来获取图片信息并获取图片的本地路径
wx.createCanvasContext创建画布，绘制上下文

需要注意的是：在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 canvas ，如果省略则不在任何自定义组件内查找

一，绘制二维码海报

  canvasCode() {
	wx.showLoading({
      title: '生成二维码中',
      mask: true
    })
    let that = this
    let modal = wx.getSystemInfoSync();          // 获取手机信号以iphone 6s为例
    let width = modal.windowWidth                // 获取手机屏幕的宽度
    // 根据手机屏幕比例计算出画布的高度
    let height = modal.windowWidth * 16 / 9      // 这里的手机屏幕比例我以16:9为例                 
    let scale = modal.windowWidth / 375
    that.setData({
      maskshow: true,            // 显示装载海报的容器
      reportHeight: height       // 设置二维码海报的高度
    })
    const ctx = wx.createCanvasContext('codereport', this)  // 创建画布

    // 生成海报图
    wx.getImageInfo({
      src: that.data.bgimg,                              // 海报图的网络路径
      success: function (res) {
        let path = res.path                              // 获取海报图的本地路径
        ctx.drawImage(path, 0, 0, width, height)         // 将海报绘制进画布 top为0，left为0，设置海报的宽高
        let codewidth = modal.windowWidth * 0.2          // 设置二维码宽度
        let codeheight = codewidth						 // 设置二维码高度	
        let top = height * 0.83							 // 设置二维码在海报里的向上偏移量
        let left = modal.windowWidth * 0.15              // 设置二维码在海报里的向左偏移量
        setTimeout(function () {
          // 二维码图
          wx.getImageInfo({
            src: that.data.codeimg,                      // 二维码的网络路径
            success: function (res) {                    
              let code = res.path                        // 获取二维码的本地路径
              ctx.drawImage(code, left, top, codewidth, codeheight)    // 将二维码绘制进画布 top为0，left为0，设置海报的宽高    
              ctx.draw(that)                             // 把绘制好的图形画进canvas
              wx.hideLoading()
              wx.canvasToTempFilePath({					// 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径									
                canvasId: 'codereport',
                success: function (res) {
                  let tempFilePath = res.tempFilePath;
                  that.setData({
                    temporarycodeUrl: tempFilePath
                  })
                  console.log(that.data.temporarycodeUrl)
                },
                fail: function (res) {
                  console.log(res);
                }
              });
            }
          })
        }, 0)
      }
    })
  }

二，保存绘制好的海报到相册中

使用微信内置Api的wx.saveImageToPhotosAlbum({})保存图片到系统相册。使用之前必须先对手机相册授权

  saveImg(e){
    let that = this;
    let url = e.currentTarget.dataset.url;      // 获取海报的文件路径
    setTimeout(function () {
      wx.showLoading({
        title: '保存中',
      })
    }, 0) 
    wx.saveImageToPhotosAlbum({
      filePath: url,        //图片文件路径
      success(res) {
        console.log(res);
        setTimeout(function () {
          wx.hideLoading()
        }, 400)
        setTimeout(function () {
          wx.showToast({
            title: '已保存到相册',
            icon: 'success',
            duration: 1500
          })
        }, 0)
        that.setData({
          maskshow: false,
        })
        wx.showTabBar({})
      },
      fail(res) {               // 保存到本地失败，弹出相册授权框
        console.log(res);
        setTimeout(function () {
          wx.hideLoading()
        }, 400)
        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
          console.log("打开设置窗口");
          setTimeout(function(){
            wx.openSetting({
              success(settingdata) {
                console.log(settingdata)        
                if (settingdata.authSetting["scope.writePhotosAlbum"]) {     // 授权成功
                  setTimeout(function(){
                    wx.showToast({
                      title: '再次长按保存',
                      icon: 'none',
                      duration: 1500
                    })
                  },0)
                } else {
                  console.log("获取权限失败")
                }
              }
            })
          }, 0)
        }
      }
    });
  },