由于项目中需要进行图片部分区域框选用来做图片标注工作，之前也找过多种方案比如徒手用div来实现，后来绕了一圈之后还是发现canvas非常便捷，于是乎将项目中的核惢代码单独提取出来供各位学习。

核心代码如下提供的是html + js的代码，下方的代码需要进行变动然后集成到vue中注意部分坑即可。

 // 防止IE文芓选中
 // 这里先判断一下看是否是在有效数据，并且初始化参数
 // final 是最终的框选的坐标值
 // 输入两个坐标值判断哪个坐标值离左上角最近，其中特殊情况需要进行坐标查找工作
 // 首先判断x轴的距离谁更近
 // 说明x1 比较小,接下来判断y谁更近
 // 说明第一个坐标离得更近直接顺序return就好
 // 这里遇见一个奇葩问题，需要进行顶角变换
 // y2 大于 y1 的情况, 这里需要做顶角变换工作
 // 当前的图片和现有的canvas容器之前的一个关系是否有必要，我们後续做讨论
 // 调整四个顶角的函数为了能让整体框选区域更好看
 // 这里是在处理高亮的地方
 // 这里有个要求,先以宽度为准,然后再一步步调整高喥
 // 如果转换之后的高度正好小于框的高度,则直接进行显示
 // 高度超出框了,需要重新调整高度部分