Cropper图片切割插件

Cropper图片切割插件(偏向前端)

官网：https://fengyuanchen.github.io/cropper/

1、引入js

获取文件包：cropperjs

 

 

2、代码：

2-1、页面布局

1、放置要裁剪图片的位置尽量包裹在box下

2、放置裁剪预览图片  添加新的div

添加overflow的作用效果：（显示裁剪框选中的内容） 

 

 

2-2、JS代码 --Cropper设置参数及函数

1、new出Cropper的一个类 =====》参数为(图片，Cropper配置参数)

参数一：获取放置要编辑图片的图片信息

参数二：Cropper的一系列配置，是一个json形式

　　　aspectRatio: 值，   控制裁剪框的比例 。

　　　　  值:  ①、1/1或2/2……  设置固定裁剪比例输入对应比值(长与宽的比例）用户只能放大或缩小（比例永远都一样）

　　　　　　  ②、NAN    用户可根据需求自动控制裁剪框大小和比例

　　　　

 　　    viewMode:值，      控制裁剪框视图模式

　　　　  值：①、   0    裁剪框可以在背景中显示 ，对裁剪框没有限制

　　　　　　  ②、   1   裁剪框不能超过图片，图片高不会和背景高一致

　　　　　　  ③、   2  继承值为1的特点裁剪框只能在图片内显示，不能超过图片、

　　　　　　　　　　 图片的高与背景高保持一致  

　　　　　　  ④、   3  图片会填满整个背景大小  （下图中的图片2整个填满背景1）

                    

 　　　 preview: '值' ，      开启预览效果

　　　　　值：放置图片div位置的class名

　　　  dragMode:'值'，      拖拽模式

　　　　　 值：①  move       光标在背景上可以移动裁剪图片、光标在裁剪框内可以移动裁剪框

　　　　　　　　　　　　    （裁剪框比例是根据aspectRadio的比例固定的）

　　　　　　     ②  crop         可以自由裁剪，光标变成十字自由切割

　　　　　　　　　　　　   （裁剪框大小和比例自行拉取框选）

　　　  cropBoxMovable:值， 光标在裁剪框内是否可以移动裁剪框

　　　　　　　　 值：true/false       默认为true

　　　   responsive:值，      在调整窗口大小的时候，会重新渲染Cropper

　　　　     值：① true        可以

　　　　　　　  ② false        不行

               restore:值，              在调整窗口大小的时候，恢复裁剪区域

　　　　　值： true/false     默认为true

　　　　 checkCrossOrigin:值，      检查图片是否为跨域图片

　　　　    值：true/false       默认为true

　　　　 modal:   值，              是否开启遮罩（裁剪框未选中地方暗色处理）

　　　　　 值：true/false   默认为true

　　　　 highlight:值，                  将选中的区域高亮处理

　　　　　　值：true/false  默认为true

　　　　  guides:值，                 是否显示裁剪的虚线

　　　　　　值：true/false     默认为true 

                   

 　　　　  background:值，        是否显示网格背景

　　　　　　值： true/false      默认为true

　　　　　

 

 　　　　 center:值，　　　　  裁剪框是否在图片的中心

　　　　　      值：true/false      默认为true

　　　　  autoCrop:值，           当初始化的时候，是否自动显示裁剪框

　　　　　　   值：true/false       默认为true

　　　　 autoCropArea:值，       初始化时，裁剪框的大小与原图的比例

　　　　           值：①   1   裁剪框大小与图片大小一样大

　　　　　　　　　②   自定义值    （0.8比较舒服）

　　　　  movable:值，                 是否允许移动图片

　　　　　　　值： true/false      默认为true

　　　　   rotatable:值，                 是否允许旋转图片（有问题）

　　　　　　　值： true/false      默认为true

　　　　　scalable:值，　　　　  是否允许缩小图片（有问题）

　　　　　　　 值： true/false      默认为true

　　　　　zoomable:值，　　　　是否允许缩放图片

　　                   值： true/false      默认为true

　　　　　zoomOnTouch:值，　 是否可以通过触摸的形式进行放大图片（手机端）

　　　　　　　  值： true/false      默认为true

　　　　　zoomOnWheel:值，      是否允许用鼠标放大缩小图片(通过滚轮缩放) mouseWheelZoom 也可以实现

　　　　　　　  值：true/false       默认为true

　　　　    wheelSoomRatio:值，　 设置鼠标控制缩放的比例（鼠标缩放图片）

　　　　　　　　值：①0.1　　（默认值）

　　　　　　　　　　②自定义数值

　　　　　 cropBoxREsizable:值，     是否可以调节裁剪框大小(裁剪框边有点可以拉)

 

　　　　　　　　值：true/false      默认为true

　　　　　 toggleDragModeOnDblclick:值，

　　　　　　　　设置dragMode的类型是否双击鼠标可以相互切换

　　　　　　　　值：true/false       默认为true

　　　　　①container背景专业术语  ②convas 背景图专业术语    ③cropBox裁剪框专业术语

　　　　　　

　　　　　 设置容器container的宽高

　　　　　 minContainerWidth:0,     最小宽              minContainerHeight:0,    最小高

                  设置canvas的宽高

  　　　　  minCanvasWidth:0,     最小宽                  minCavasWidth:0,        最小高

　　　　　设置裁剪层（裁剪框大小）

　　　　　minCropBoxWidth:0,    最小宽                   minCropBoxHeight,0,　最小高

 

　　　　   函数：

　　　　　①ready             当插件准备完成的时候，会执行函数　　

ready:function(e)
{   
}

　　　　　②cropstart        当裁剪框开始移动的时候，会执行的函数

cropstart :function(e)
{
}

　　　　　③cropmove         当裁剪框移动的时候，会执行的函数(没一帧都会调用)　　　    

cropmove :function(e)
{
}

　　　　　  ④cropend                 当裁剪框移动结束的时候，会执行的函数

cropend:function(e)
{
}

　　　　　　⑤crop　　　　　　　 在裁剪框发生变化的时候，会调用的函数（比如缩小裁剪框就会触发这个函数）

crop：function(e)
{
}

 Cropper的自带API方法   （使用new的Cropper对象名去点下面的函数方法名）

重置    .reset();                      --将图像及裁剪框重置为初始状态       无参

清除     .clear();　　　　　　--清除裁剪框（裁剪框就会删除掉-看不见）   无参   

替换     .replace(" ",)              --替换图片    两参    第一个参数为替换图片，第二个参数布尔类型  是否保持原来比例

 

 

解锁：

锁定：