关于图片剪裁插件Cropper.js的使用指南

先来看效果

它可以实现图片的放大、缩小、旋转、拖动和裁剪等效果。

引入必要的js和css核心文件

<link rel="stylesheet" href="https://cdn.bootcss.com/cropperjs/2.0.0-alpha.1/cropper.css">
<script src="https://cdn.bootcss.com/cropperjs/2.0.0-alpha.1/cropper.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>复制代码

构建html

基础代码

<label title="上传图片" for="chooseImg" class="l-btn choose-btn">
   <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)" />     
</label>
<div class="str">
    <img id="fileImg" src="" width="100%">
</div>复制代码

<!--图片裁剪框 start-->
<div style="display: none" class="tailoring-container"> 
    <div class="black-cloth" onclick="closeTailor(this)"></div>        
<div class="tailoring-content">            
    <div class="tailoring-content-one">                
        <div class="close-tailoring" onclick="closeTailor(this)">×</div>            
    </div>            
    <div class="tailoring-content-two">
        <div class="tailoring-box-parcel">
            <img id="tailoringImg">
        </div>                
<div class="preview-box-parcel">                    
<p>图片预览：</p>                    
<div class="square previewImg"></div>                    
<!--  <div class="circular previewImg"></div>-->                
</div>           
 </div>           
 <div class="tailoring-content-three">                
    <button class="l-btn cropper-reset-btn">复位</button>                
    <button class="l-btn cropper-rotate-btn">旋转</button>                
    <button class="l-btn cropper-scaleX-btn">换向</button>                
    <button class="l-btn cropper-enlarge-btn">放大</button>                
    <button class="l-btn cropper-narrow-btn">缩小</button>                
    <button class="l-btn sureCut" id="sureCut">确定</button>            
    </div>        
</div>    
</div>复制代码

初始化插件及相关参数

var cropper =  new Cropper($('#tailoringImg')[0],{            
    aspectRatio: 1 / 1,// 默认比例              
    preview: '.previewImg',// 预览视图              
    guides: false, // 裁剪框的虚线(九宫格)              
    autoCropArea: 0.5, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8              
    movable: false, // 是否允许移动图片              
    dragCrop: true, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域              
    movable: true, // 是否允许移动剪裁框              
    resizable: true, // 是否允许改变裁剪框的大小             
    scalable:false, //是否可以缩放图片             
    zoomable: true, // 是否允许缩放图片大小              
    mouseWheelZoom: false, // 是否允许通过鼠标滚轮来缩放图片              
    touchDragZoom: false, // 是否允许通过触摸移动来缩放图片              
    rotatable: true, // 是否允许旋转图片             
    crop: function (e) {                
        let cas = cropper.getCroppedCanvas();// 获取被裁剪后的canvas                  
        let base64 = cas.toDataURL('image/jpeg'); // 转换为base64                  
        $("#finalImg").prop("src", base64);// 显示图片                  
        // 输出结果数据裁剪图像。              
});复制代码

// 选择文件触发事件          
function selectImg(file) {            
    //文件为空，返回              
    if (!file.files || !file.files[0]) {                
        return;            
    $(".tailoring-container").toggle();
    var reader = new FileReader();            
    reader.onload = function (evt) {                
        console.log(evt,cropper,'./.evt.target.result')                
        var replaceSrc = evt.target.result;                
        // 更换cropper的图片                  
        cropper.replace(replaceSrc, false);// 默认false，适应高度，不失真              
    reader.readAsDataURL(file.files[0]);        
}复制代码

// 旋转          
$(".cropper-rotate-btn").on("click", function () {            
    cropper.rotate(45);        
// 复位          
$(".cropper-reset-btn").on("click", function () {            
    cropper.reset();        
// 放大        
$('.cropper-enlarge-btn').on('click',function(){            
    console.log(cropper,'cropper---enlarge')            
    cropper.zoom(2);        
// 缩小        
$('.cropper-narrow-btn').on('click',function(){            
    console.log(cropper,'cropper---narrow')            
    cropper.zoom(-2);            
// 换向          
var flagX = true;        
$(".cropper-scaleX-btn").on("click", function () {            
    if (flagX) {                
        cropper.scaleX(-1);                
        flagX = false;            
    } else {                
        cropper.scaleX(1);                
        flagX = true;            
    flagX != flagX;
// 关闭裁剪框          
function closeTailor() {            
    $(".tailoring-container").toggle();        
复制代码

基础配置说明

参数

aspectRatio：类型：Number，默认值NaN。设置剪裁容器的比例。
crop：类型：Function，默认值null。当改变剪裁容器或图片时的事件函数。
preview：类型：String(jQuery选择器)，默认值''。添加额外的元素（容器）的预览。注意：
最大宽度是剪裁容器的初始化宽度
最大高度是剪裁容器的初始化高度
如果你设置了aspectRatio参数，确保预览容器具有相同的比例
strict：类型：Boolean，默认值true。在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
responsive：类型：Boolean，默认值true。是否在窗口尺寸改变的时候重置cropper。
checkImageOrigin：类型：Boolean，默认值true。默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
background：类型：Boolean，默认值true。是否在容器上显示网格背景。
modal：类型：Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
guides：类型：Boolean，默认值true。是否在剪裁框上显示虚线。
highlight：类型：Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
autoCrop：类型：Boolean，默认值true。是否在初始化时允许自动剪裁图片。
autoCropArea：类型：Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁区域的大小。
dragCrop：类型：Boolean，默认值true。是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
movable：类型：Boolean，默认值true。是否允许移动剪裁框。
resizable：类型：Boolean，默认值true。是否允许改变剪裁框的大小。
zoomable：类型：Boolean，默认值true。是否允许放大缩小图片。
mouseWheelZoom：类型：Boolean，默认值true。是否允许通过鼠标滚轮来缩放图片。
touchDragZoom：类型：Boolean，默认值true。是否允许通过触摸移动来缩放图片。
rotatable：类型：Boolean，默认值true。是否允许旋转图片。
minContainerWidth：类型：Number，默认值200。容器的最小宽度。
minContainerHeight：类型：Number，默认值100。容器的最小高度。
minCanvasWidth：类型：Number，默认值0。canvas 的最小宽度（image wrapper）。
minCanvasHeight：类型：Number，默认值0。canvas 的最小高度（image wrapper）。
build：类型：Function，默认值null。build.cropper事件的简写方式。
built：类型：Function，默认值null。built.cropper事件的简写方式。
dragstart：类型：Function，默认值null。dragstart.cropper事件的简写方式。
dragmove：类型：Function，默认值null。dragmove.cropper事件的简写方式。
dragend：类型：Function，默认值null。dragend.cropper事件的简写方式。
zoomin：类型：Function，默认值null。zoomin.cropper事件的简写方式。
zoomout：类型：Function，默认值null。zoomout.cropper事件的简写方式。

方法

cropper.reset() 将图像以及裁剪重置为初始状态
cropper.clear() 清除裁剪框
cropper.replace("图片路径",false); 替换图片,参数1：替换的图片，参数二，boolean是否保持原来的比例
cropper.enable() 解锁
cropper.disable() 锁定
cropper.destroy() 销毁cropper，并在图像中将整个cropper销毁(将插件销毁)
cropper.move(offsetX, offsetY)移动x轴/y轴坐标,移动图片.相对自己的位置
cropper.moveTo(2,0)移动到x,有一个具体的坐标
cropper.moveTo(0,2) 移动到y
cropper.zoom(0.1 ) 放大
cropper.zoom(-0.1) 缩小
cropper.zoomTo(2) 放大到，原来的两倍
cropper.zoomTo(0.2) 缩小到
cropper.rotate(-45) 逆时针旋转，度数
cropper.rotate(45) 顺时针旋转（正数）
cropper.rotate(-45) 逆时针旋转到（正数）
cropper.rotate(45) 顺时针旋转（正数）
cropper.scale(-1,1) 沿y轴翻转,当前轴不变，另一轴为-1
cropper.scale(1,-1) 沿x轴翻转
cropper.scale(-1) 缩放图片x坐标
cropper.scaleX(0.5) 缩放图片X坐标
cropper.scaleY(2) 缩放图片Y坐标
cropper.getData() 获取数据信息(裁剪框的数据)
cropper.setData({width:200,height:100}) 获取数据信息(裁剪框的数据)
cropper.getContainerData() 获取Container的数据信息,没有setContainerData函数
cropper.getImageData() 获取image的数据信息,就是图片大小
cropper.getCanvasData() 获取Canvas的数据信息
cropper.setCanvasData({left:0,top:0,width:200,height:200}) 设置Canvas的数据信息
cropper.getCropBoxData() 获得裁剪框的详细数据
cropper.setCropBoxData({left:0,top:100,width:00,height:200}) 获得裁剪框的详细数据
cropper.getCroppedCanvas() 获得裁剪后的图片,裁剪后的base64编码
cropper.setAspectRatio(1/1) 修改裁剪框的长宽比
cropper.setDragMode("crop") 设置拖拽模式，none,crop,move
cropper.getCroppedCanvas() 获取canvas绘制的剪裁图像。在这之后，你可以直接将canvas作为图片显示，或使用canvas.toDataURL方法获取图像的数据链接，或者使用canvas.toBlob方法获取一个blob，并通过FormData方法将它更新到服务器上（如果浏览器支持这些API）