利用canvas完成移动端裁剪图片功能以及在用drawimage绘制图片的一点问题

        最近项目有了一个裁取图片的一部分的需求，效果图如下：

        实现思路比较简单，点击上传图片的时候，触发input；input的onchangge事件触发的时候，利用fileReader读取图片信息并显示第二张图的界面；点击完成时，将截取框距离图片顶部的距离保存到图片的文件名里面，上传整张图片到服务器；同时在前端相应位置通过canvas计算需要绘制的区域，将截取的部分显示到相应位置。

       第二个截取图片的界面，用两个image标签显示同一张图片，利用position重叠显示，第一张图片设置透明度，第二张图片利用clip属性，显示部分图片即可，再添加一个div用于显示边框以及帮助确定顶部的距离

       有两个值得注意的点：

       1、在获取图片的各种宽高的值是时，由于image是动态对src进行的赋值，要在image.onload之后才能正确获取；

       2、drawImage的前五个参数是关于需要绘制的image的，其中的width、height指的是原图上面的截取宽高，即要相对于image的naturalwidth和naturalheight进行取值，而不是缩小显示后直接获取到的值。

       遇到了一个灵异事件：

       

       可以看到： 我的canvas高度是133.39px，drawimage的参数就是canvas的高度，但是图片绘制之后，底部有空隙，用了多种方法都没能解决，最后在给height乘了个1.15竟然解决了，canvas用的少，有明白的兄弟评论区赐教一下