关于小程序使用cavas裁剪照相后区域图片以及压缩

一开始我是想用canvas做出这样的一个页面的，但是不好操作，效果于UI图相差甚远；
所以直接让ui一张背景图包括文字；再加上一个按钮的图片；

• 那么拍照后怎么截图框内图片呢；
  哈哈，其实这里我是只截取了中间三分之一；
  另外后台要求以base64方式发送；so，代码如下；

<camera device-position="back" flash="auto">
<cover-image class='bck' src="拍照按钮">
</cover-image>
<cover-image src='背景图' class= 'takephoto' bindtap='takePhoto' style='width:140rpx;height:140rpx; position:absolute; bottom:50rpx; left:50%;margin-left:-70rpx;z-index:99;'> </cover-image>
</camera>
<view style="position:fixed;top:999999999999999999999rpx;">
  <canvas canvas-id='attendCanvasId' style="width:{{width}}px; height:{{height}}px;"></canvas>
</view>

takePhoto: function() {
    wx.showLoading({
      'title': '加载中',
      'mask':true
    })
    const ctx = wx.createCameraContext()
    let that = this;
    ctx.takePhoto({
      quality: 'low',
      success: (res) => {
        let tempImagePath = res.tempImagePath
        let fileLastName = tempImagePath.substring(tempImagePath.lastIndexOf(".") + 1)
        const ctx = wx.createCanvasContext('attendCanvasId');
        ctx.drawImage(tempImagePath, 0, 0, that.data.width, that.data.height);
        ctx.draw();
        wx.canvasToTempFilePath({
          x: that.data.width / 3, //画布x轴起点
          y: 0, //画布y轴起点
          width: that.data.width / 3, //画布宽度
          height: that.data.height, //画布高度
          canvasId: 'attendCanvasId',
          success: function(res) {
            let base64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')
            console.log('base64', base64)
            that.setData({
              src: fileLastName + '@' + base64
            })
            that.upload()
          }
        })
      }
    })
  }

这里分为几步

• 1. 通过调用camera标签里面嵌套cover-image做出设计效果；
• 2. 通过官方api调用拿到图片路径
• 3.因为不能整张发送，这样就太大了；所以需要先转canvas；所以多了个canvas标签哈，再通过drawImage以及canvasToTempFilePath截取中间部分；
• 4.最后转base64发送，设计quality: 'low',以及截取三分之一；iphone6拍照拿到的base64文本大小为300KB，安卓普遍为200KB；
• 有个坑，就是canvas标签外层不加上view的话，二次进入页面会有显示性的bug