最近项目上要做一个车牌识别的功能。本来以为很简单，只需要将图片扔给后台就可以了，但是经测试后识别率只有20-40%。因此产品建议拍摄图片后，可以对图片进行拖拽和缩放，然后裁剪车牌部分上传给后台来提高识别率。刚开始的话还是百度了一下看看有没有现成的组件，但是找来找去都没有找到一个合适的，还好这个功能不是很着急，因此自己周末就在家里研究一下。
Demo地址：https://vivialex.github.io/demo/imageClipper/index.html
下载地址：https://github.com/vivialex/vue-imageClipper
因为移动端是用vue
Vue.js是一种流行的前端框架，用于构建用户界面。在这个项目中，开发者面临的问题是如何提高车牌识别的准确性。最初，他们设想只需将图片发送给后端，但测试结果显示识别率只有20%-40%。为了解决这个问题，产品建议在图片上传前增加拖拽和缩放功能，让用户可以精确地裁剪出车牌部分，从而提高识别率。
开发人员决定创建一个基于Vue的移动端图片裁剪组件，由于项目使用Vue.js，因此这个组件也以Vue组件的形式实现。他们提供了组件的Demo地址（https://vivialex.github.io/demo/imageClipper/index.html）和GitHub下载链接（https://github.com/vivialex/vue-imageClipper）供其他人参考。
该组件的主要功能包括：
1. 初始化参数：组件接收图片（URL或base64数据URL）、截图宽度（clipperImgWidth）和高度（clipperImgHeight）作为输入。这些属性可以通过Vue的props机制传递给组件。
2. 布局：组件的布局分为四层。第一层是一个全屏的canvas（cCanvas），第二层是半透明的遮罩层，第三层是裁剪区域（白色方框），包含一个与裁剪区域相同大小的canvas（pCanvas），第四层是手势操作层（gesture-mask），用于处理触摸事件。两个canvas都显示同一张图片，但坐标不同，以便实现手指离开屏幕后，裁剪区域外的部分被遮罩层覆盖的效果。
3. 初始化canvas：为了解决在高清显示屏上canvas模糊的问题，开发者使用了devicePixelRatio来调整canvas的尺寸和绘制操作。他们创建了一个名为`_ratio`的方法来计算设备像素比，并在初始化canvas时应用。同时，记录了两个canvas的原点偏移量，以便后续处理。
4. 组件交互：用户可以通过触摸事件在裁剪区域内进行拖动和缩放操作。在拖动和缩放过程中，需要实时更新pCanvas上的图像以反映当前裁剪状态。这涉及到canvas的drawImage方法以及触摸事件的处理。
5. 操作按钮：组件底部有取消和确认两个按钮，分别用于取消操作和提交裁剪结果。
6. 遮罩层：通过改变`.mask`类的opacity属性，可以控制背景遮罩层的透明度，从而实现用户操作时的视觉反馈。
7. 最终裁剪：当用户点击确认按钮时，组件将裁剪后的图像数据提交给后端，以便进行车牌识别。
这个基于Vue的移动端图片裁剪组件利用了canvas的绘图能力和Vue的组件化特性，提供了一个用户友好的裁剪界面，提高了车牌识别的准确性和用户体验。开发者通过自定义组件实现了图片的拖拽、缩放和裁剪功能，克服了高清屏幕下canvas模糊的问题，并通过手势操作层实现了触摸事件的响应，展示了Vue.js在解决实际问题中的灵活性和实用性。
