关于图片裁剪

最近在做一个图片裁剪的功能，然后现在来做个记录

一般裁剪的原理分两种，一是固定裁剪图片的位置，移动裁剪框（多用于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格式提交给后台处理
    }
});