图片裁剪的js有哪些（整理）

一、总结

一句话总结：如果用了amaze框架就去amaze框架的插件库里面找图片裁剪插件，如果没用，jcrop和cropper都不错。

1、amazeui的插件库中有很多好用的插件（包括两款比较好用的图片裁剪工具）给了我们什么启示？

关注前端框架的插件，或者说多去探索他们的功能，多去点点

那些比较知名的前端框架肯定是因为他们的很多方面都做的很好，有很多功能，而我还没有发现，比如bootstrap，所以多去官网，多去点点

2、裁剪的英语单词叫什么？

crop

这个真的还挺重要的，这样看到插件叫这个名字起码知道是一个裁剪插件

二、几种js图片裁剪

tapmodo / Jcrop
Jcrop是人气最高的图片裁剪jQuery插件，stars数量2k+，功能非常丰富，文档齐全，首选。Github.com官网也使用了这个插件。有一个小细节是，边框线的蚂蚁线是动画的，真的很用心。

Jcrop项目地址 | demo1 | demo2 | demo3 | demo4
fengyuanchen / cropper
Cropper也是一款图片裁剪jQuery插件，stars数量1k+，是杭州的前端工程师Fengyuan Chen所写的，功能也相当丰富，裁剪时还可以对原图进行旋转。

Cropper项目地址 |
demo
odyniec / imgareaselect
imgAreaSelect 也是比较经典的图片裁剪jQuery插件，我很久以前就在自己的项目中使用过，stars数量500+。
imgAreaSelect项目地址 |
demo
alexk111 / ngImgCrop
ngImgCrop是用于AngularJS的图片裁剪插件，提供圆形和矩形两种裁剪框风格。

ngImgCrop项目地址 |
demo
andyshora / angular-image-crop
Angular Image Crop 也是用于AngularJS的图片裁剪插件，我没用过，不好评价什么了。
Angular Image Crop 项目地址 |
demo

参考：几种js图片裁剪 - CSDN博客
https://blog.csdn.net/zdw19861127/article/details/52856568?locationNum=5&fps=1

三、cropper.js图片裁剪

最近做电子名片的项目，可是个人照片展示上出现了用户上传的图片尺寸严重失调，所以要求进行图片裁剪，再此我对图片裁剪进行调研还不太成熟以后再改

这个实现的原理是前台获取到坐标图片的尺寸原图文件传给后台进行裁剪

这个是我在网上找的一个插件 cropper功能很强大

这里是官方文档

首先使用cropper必须引入对应得css和js，还有jquery

<script src="jquery.js"></script>
<link  href="cropper.css" rel="stylesheet">
<script src="cropper.js"></script>

html结构，cropper是针对img得所以配置项需要配置到img上

<div class="container">
    <img id="img" src="img/add-pic.png">
</div>

相对的js配置（这是项目里应用的部分参数如果以后有改动需要根据API配置）

 $('.container > img').cropper({//这里是给img 即被裁剪的图片进行参数配置
            aspectRatio: 720 / 425,//裁剪框的比例
            preview: $('.avatar-preview'),//预览的容器
			minContainerHeight: 1080,//容器最小高度
			autoCropArea: 0.9,//初始化裁剪框大小（相对于图片大小做比例）
			movable:false,//是否能移动裁剪框（这里是可以移动图片 裁剪框处于不动的状态 按你的需求设置）
			dragCrop:false,//不允许重新开裁剪框
            　　　　　　　resizable:false,//不允许改变裁剪框大小
            crop: function(data) {
                //data是 x,y width, height rotate scaleX scaleY裁剪框的坐标，以及裁剪出来的图片长宽 旋转角度 缩放等
                $('#x').val(data.x);
                $('#y').val(data.y);
                console.log('w'+data.width+'   height'+data.height);
            },
            //这几个回调函数
            build: function (e) { //是图片绘制到cropper自动生成的canvas的开始   加载开始
                //过渡效果
            },
            built: function (e) { //加载完成  绘制完成 获取到相应的data
 
            }
 
        });

　　效果图：

并且移动图片的过程中会获取到data

上传的时候，使用了FromData 但是在调用ajax的时候会报错这个问题后来使用特别方式解决以后研究

        var data = new FormData();
        data.append("x",Math.floor(myval('x')));
        data.append("y",Math.floor(myval('y')));
        data.append("w",Math.floor(myval('w')));
        data.append("h",Math.floor(myval('h')));
 
        data.append("file",$("#imgUpload")[0].files[0]);
        data.append("name",$("#imgUpload").val());
        data.append('jsonpcallback','a');

　由于会报错所以有人告诉我这样一个方式但是只能从error中获取值

$.ajax({

    "type": 'post',
    "url": "imageCut",
    "dataType": "json",
    "data": data,
    // 告诉jQuery不要去处理发送的数据  发送了fromData对象
    processData : false,
    // 告诉jQuery不要去设置Content-Type请求头
    contentType : false,
    success: function (resp) {
        console.log(resp)
    },
    error:function(data){
        if(data.status==200){
//这个就是裁剪后图片的线上地址
           console.log(data.responseText);                   
        }
    }

});

上传的方式，

1.可以通过form表单的方式进行

2.ajax上传（将图片转化为Base64编码）

Demo 的HTML结构

<form action="http://172.16.105.43:8080/vcard/imageCut" enctype="multipart/form-data" method="post"  id="form">
               <div class="pic">
                   <a href="javascript:void(0)" class="add"><input type="file" name="file" id="imgUpload"/></a>
                   <div class="mask_box">
                       <div class="container">
                           <img id="img" src="img/add-pic.png">
                       </div>
                       <input type="hidden" name="x"  id="x" value="0"/>
                       <input type="hidden" name="y"  id="y" value="0"/>
                       <input type="hidden" name="w"  id="w" value="720"/>
                       <input type="hidden" name="h"  id="h" value="425"/>
                       <div class="btn_submit"><span onclick="cancel()" >取消</span><span class="right" onclick="upload()">完成</span></div>
                   </div>
               </div>
</form>

参考：cropper.js图片裁剪 - 明媚下雨天 - 博客园
https://www.cnblogs.com/GoTing/p/7536648.html

四、amazeui前端框架插件库中的图片裁剪

amazeui插件库地址：Amazeui Plugins
http://plugins.amazeui.org/

有两个，感觉都还挺好用的

功能也还比较强大

使用的话官方介绍的是非常详细的