关于图片裁剪
最近在做一个图片裁剪的功能,然后现在来做个记录
一般裁剪的原理分两种,一是固定裁剪图片的位置,移动裁剪框(多用于pc端)。二是固定裁剪框,移动裁剪的图片(多用于移动端)
一、pc端图片裁剪解决方案:cropper.js --- 裁剪图片并上传的插件。属于固定图片,移动裁剪框的类型。依赖于jquery插件
具体api可参照官网,中文翻译课参考以下链接 https://blog.csdn.net/weixin_38023551/article/details/78792400 。
demo下载:链接:https://pan.baidu.com/s/1vUDD36jVaCHtnbqealq5eA 密码:tja2
使用感受:该插件基本能满足裁剪功能,裁剪的图片,和裁剪的区域均可放大缩小,移动端也能用。但是整体来说更适合pc端
不足之处:
1、截图只能截图矩形,不能是圆角矩形或者圆形
2、进行裁剪的图片只能放大缩小,不能上下左右拖动
二、移动端照片裁剪解决方案 : jQuery-photoClip ----
github地址:https://github.com/baijunjie/PhotoClip.js
原理上是用canvas来实现的。所以在上传图片的时候,会对图片做一些相应的压缩(比如5M的图片,输出时是500k)。但是但你上传的图片过小时,输出的图片会比原来的图片要大(比如上传50k的图片,输出时是200k),这些都是正常现象
裁剪的时候类似于qq上传头像裁剪功能,裁剪框固定大小,调整图片上下左右拖动,或放大放小进行裁剪
var clipArea = new PhotoClip("#clipArea", { size: [300, 300], //裁剪框大小 outputSize: [0, 0], //打开图片大小,[0,0]表示原图大小 file: "#file", view: "#view", //裁剪预览图片id(需要的自行添加) ok: "#clipBtn", loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象,并将正在加载的 file 对象作为参数传入。(如果是使用非 file 的方式加载图片,则该参数为图片的 url) }, loadComplete: function() { //图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象,并将图片的 <img> 对象作为参数传入。 }, done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象,会将裁剪出的图像数据DataURL作为参数传入。 console.log(dataURL); //dataURL裁剪后图片地址base64格式提交给后台处理 } });