基于Vue的移动端图片裁剪组件功能

最近项目上要做一个车牌识别的功能。本来以为很简单，只需要将图片扔给后台就可以了，但是经测试后识别率只有20-40%。因此产品建议拍摄图片后，可以对图片进行拖拽和缩放，然后裁剪车牌部分上传给后台来提高识别率。刚开始的话还是百度了一下看看有没有现成的组件，但是找来找去都没有找到一个合适的，还好这个功能不是很着急，因此自己周末就在家里研究一下。

　　Demo地址：https://vivialex.github.io/demo/imageClipper/index.html

　　下载地址：https://github.com/vivialex/vue-imageClipper

　　因为移动端是用vue，所以就写成了一个vue组件，下面就说说自己的一些实现思路（本人技术有限，各位大神请体谅。另外展示的代码不一定是某个功能的完整代码），先看看效果：　

　　一、组件的初始化参数

　　1、图片img（url或者base64 data-url）

　　2、截图的宽clipperImgWidth

　　3、截图的高clipperImgHeight

props: {
  img: String, //url或dataUrl
  clipperImgWidth: {
    type: Number,
    default: 500
  },
  clipperImgHeight: {
    type: Number,
    default: 200
  }
}

　　二、布局

　　在Z轴方向看主要是由4层组成。第1层是一个占满整个容器的canvas（称cCanvas）；第2层是一个有透明度的遮罩层；第3层是裁剪的区域（示例图中的白色方框），里面包含一个与裁剪区域大小相等的canvas（称pCanvas）；第4层是一个透明层gesture-mask，用作绑定touchstart，touchmove，touchend事件。其中两个canvas都会加载同一张图片，只是起始坐标不一样。为什么需要两个canvas？因为想做出当手指离开屏幕时，裁剪区域外的部分表面会有一个遮罩层的效果，这样能突出裁剪区域的内容。

<div class="cut-container" ref="cut">
  <canvas ref="canvas"></canvas>
  <!-- 裁剪部分 -->
  <div class="cut-part">
    <div class="pCanvas-container">
      <canvas ref="pCanvas"></canvas>
    </div>
  </div>
  <!-- 底部操作栏 -->
  <div class="action-bar">
    <button class="btn-cancel" @click="_cancel">取消</button>
    <button class="btn-ok" @click="_cut">确认</button>
  </div>
  <!-- 背景遮罩 -->
  <div class="mask" :class="{opacity: maskShow}"></div>
  <!-- 手势操作层 -->
  <div class="gesture-mask" ref="gesture"></div>
</div>