小程序保存定制二维码图片.md

1. 设置 canvas 组件的属性

1. 绑定 key，并每次都修改该 key。这样保证每次画图都是在新的空白背景上画图，否则下次就是在上次结果上画图，从而导致出现问题。
2. style 中指定幕布的宽高为真实需要输出的图片的宽与高，否则会导致图片伸缩。

    <canvas
      :key="canvasKey"
      canvas-id="hiddenCanvasShare"
      class="canvas-share-hidden"
      style="width:750px;height:900px;">
    </canvas>

2. 用 fixed定位，将canvas 组件隐藏

1. left 设置为9999px，远超出屏幕，达到隐藏的目的。
2. z-index 保证不被 loading 之类组件覆盖。

  .canvas-share-hidden {
    position: fixed;
    top: 0;
    left: 9999px;
    z-index: 999;
  }

3. 绘制图片

1. 需要将图片下载下来存到本地，并使用本地地址 xxTmpPath
2. ctx.drawImg 的第一个参数即为xxTmpPath
3. 绘制裁剪图形: 用 arc 和 clip 方法裁剪形状，用 save, restore 方法使接下来的操作仅限于被裁剪的形状之内，而不会影响之后的其他操作。

      ctx.save()
      let headImageSize = 50
      let halfImageSize = headImageSize / 2
      ctx.arc(rpx(50 + halfImageSize, scale), rpx(130 + halfImageSize, scale), rpx(halfImageSize, scale), 0, 2 * Math.PI)
      ctx.clip()
      ctx.drawImage(headImgPath, rpx(50, scale), rpx(130, scale), rpx(headImageSize, scale), rpx(headImageSize, scale))
      ctx.restore()

4. 输出图片

在 draw 的回调里面保存图片到临时文件，再将临时文件保存到相册

      ctx.draw(false, () => {
        timer.logTime('draw image finished')
        wx.canvasToTempFilePath({
          canvasId: canvasId,
          success: function (res) {
            timer.logTime('canvasToTempFilePath')
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: res1 => {
                timer.logTime('saveImageToPhotosAlbum')
                success(res.tempFilePath)
              },
              fail: e => {
                console.error(e)
                fail()
              }
            })
          },
          fail: function (res) {
            console.error(res)
            fail()
          }
        })
      })