微信小程序拍照后提取指定框内的图片

由于自己在开发的过程中，需要用到拍照后立即按指定区域切图，于是就研究了一下小程序的拍照功能，以下是效果图，具体代码看我的GitHub，有不懂的地方可以留言交流。

IMG_0978.PNG IMG_0979.PNG IMG_0C286DAD5062-1.jpeg

在代码中主要用到了cover，在相机上面进行绘制，详细了解请看我的GitHub

关键代码

<view style='width:{{width}}px; height:{{height}}px; overflow:hidden;'>
    <camera device - position="back" flash = "off" style="width:{{width}}px; height:{{height}}px; margin-left:0px">
    <cover-image src='{{logo}}' class= 'takephoto' bindtap='takePhoto' style='width:150px; height:150px; position:absolute; bottom:30px; left:{{(width-150)/2}}px;'> </cover-image>
  <!--上部线条 -->
  <cover-view class= 'biaochi' style = 'top:{{gap}}px; left:{{gap}}px; width:{{width-gap*2}}px; height:2px;'> </cover-view>
  <!--下部线条 -->
  <cover-view class= 'biaochi' style = 'top:{{gap+50}}px; left:{{gap}}px; width:{{width-gap*2}}px; height:2px;'> </cover-view>
  <!--右部线条 -->
  <cover-view class= 'biaochi' style = 'top:{{gap}}px; right:{{gap}}px; width:2px; height:50px;'> </cover-view>
  <!--左部线条 -->
  <cover-view class= 'biaochi' style = 'top:{{gap}}px; left:{{gap}}px; width:2px; height:50px;'> </cover-view>
  </camera>
</view> 

  onLoad: function (options) {
    var that = this
    that.path = options.path
    wx.getSystemInfo({
      success: function (res) {
        var width = res.windowWidth
        var height = res.windowHeight
        var gap = 20
        that.setData({
          width:width,
          height:height,
          gap: gap
        })
        wx.getImageInfo({
          src: that.path,
          success: function(res){
            that.canvas = wx.createCanvasContext("image-canvas", that)
            //过渡页面中，图片的路径坐标和大小
            that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height)
            wx.showLoading({
              title: '数据处理中',
              mask: true
            })
            that.canvas.setStrokeStyle('red')
            // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的
            //过渡页面中，对裁剪框的设定
            that.canvas.strokeRect(that.data.gap, that.data.gap, that.data.width - 2 * that.data.gap, 50)
            that.canvas.draw()
            setTimeout(function () {
              wx.canvasToTempFilePath({//裁剪对参数
                canvasId: "image-canvas",
                x: that.data.gap,//画布x轴起点
                y: that.data.gap,//画布y轴起点
                width: that.data.width - 2 * that.data.gap,//画布宽度
                height: 50,//画布高度
                destWidth: that.data.width - 2 * that.data.gap,//输出图片宽度
                destHeight: 50,//输出图片高度
                canvasId: 'image-canvas',
                success: function (res) {
                  that.filePath = res.tempFilePath
                  //清除画布上在该矩形区域内的内容。
                  that.canvas.clearRect(0, 0, that.data.width, that.data.height)
                  that.canvas.drawImage(that.filePath, that.data.gap, that.data.gap, that.data.width - that.data.gap*2, 50)
                  that.canvas.draw()
                  wx.hideLoading()
                  //在此可进行网络请求
                  
                },
                fail:function(e){
                  wx.hideLoading()
                  wx.showToast({
                    title: '出错啦...',
                    icon: 'loading'
                  })
                }
              });
            }, 1000);
          }
        })
      }
    })
  },
})