最近项目有了一个裁取图片的一部分的需求,效果图如下:
实现思路比较简单,点击上传图片的时候,触发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用的少,有明白的兄弟评论区赐教一下