前言
前段时间遇到了一个移动端对图像进行裁剪、压缩、旋转的需求。
考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子。
关于图像裁剪、压缩
在HTML5时代,canvas
的功能已经非常强大了,可以进行像素级的操作。像图像裁剪、压缩就都是基于canvas
来实现的。
关于其中原理,无非就是利用canvas
自带的API,复杂一点的就是裁剪框以及旋转后的坐标计算,因此不再赘述。
本文中的图像裁剪、压缩都是基于canvas
完成的。
图像裁剪
功能包括:
canvas
绘制图片裁剪框选择裁剪大小
旋转功能
放大镜(方便旋转)
裁剪功能
缩放、压缩功能(通过参数控制)
示例
https://dailc.github.io/image-process/examples/clip.html
效果