jQuery圖片剪裁插件Cropper.js的使用

插件下載地址及文檔說明

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

<link rel="stylesheet" href="../css/cropper.css">
<script src="../js/cropper.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

 

2.構建html，能夠將圖片或canvas直接包裹到一個塊級元素中。small時預覽框

<div class="box" style="width: 600px;height: 300px;"> 
　　<img id="image" src="../images/Tom.jpg" alt="Picture">
</div>
<div class="small" style="width: 200px;height: 200px;overflow: hidden;"></div>

3.初始化插件及相關參數

var image = document.getElementById("image");
        var cropper = new Cropper(image,{
            //裁剪框的比例1/1
            aspectRatio:NaN,
            //視圖模式
            viewMode:1,//0，1-,2-,3讓圖片填滿畫布
            //開啓預覽效果
            preview:'.small',
            //拖拽模式
            // dragMode:'crop',//參數：move-能夠移動圖片和框，crop-拖拽新建框
            dragMode:'move',//參數：move-能夠移動圖片和框，crop-拖拽新建框
            
            //在調整窗口大小時，會從新渲染cropper
            responsive:true,
            //在調整窗口大小時，恢復裁剪區
            restore:true,
            //檢查圖片是否爲跨域圖片
            checkCrossOrigin:true,
            //是否開啓遮罩，將未選中的地方暗色處理
            modal:true,
            //是否顯示裁剪的虛線
            guides:true,
            //將選中的區域亮色處理
            highlight:true,//默認
            //是否顯示網格背景
            background:true,
            //裁剪框是否在圖片的中心
            center:true,
            //當初始化的時候（是否自動顯示裁剪框）.
            autoCrop:true,
            //當初始化時，裁剪框的大小與原圖的比例
            autoCropArea:0.8,//0.8是默認，1是1比1
            //是否容許移動圖片
            movable:true,//默認爲true
            //是否容許旋轉圖片(函數調用時)()
            rotatable:true,
            //是否容許翻轉圖片(問題)
            scalable:true,
            //是否能夠縮放圖片
         
            zoomable:true,//false爲不能放大縮小 
            //是否能夠經過觸摸的形式來放大圖片(手機端)
            zoomOnTouch:true,    

            //是否容許用鼠標來放大貨縮小圖片
            zoomOnWheel:true,
            //設置鼠標控制縮放的比例
            wheelZoomRatio:0.2,  
            
            //是否能夠移動裁剪框
            cropBoxMovable:true,//裁剪框不動，圖片動。當movable:true  
            //是否能夠調整裁剪框的大小，默認true
            cropBoxResizable:true,

            //設置dragMode 是否能夠相互切換（條件：雙擊鼠標能夠切換）
            toggleDragModeOnDblclick:true,

            //設置Container的w和h
            minContainerWidth:0,
            minContainerHeight:200,
            //設置canvas的w和h
            // canvas太大Container裝不下
            minCanvasWidth:0,
            minCanvasHeight:0,
            //設置裁剪層
            minCropBoxWidth:0,
            minCropBoxHeight:100,

            //一.crop開始-過程-結束的函數
            //1.當插件準備完成時,執行此函數
            ready:function(e){
                // alert("ready");
            },
            //2.當裁剪框開始移動的時候會執行的函數
            cropstart:function(e){
                // console.log("start");
            },
            //3.裁剪框移動的時候會執行的函數(每一幀都會調用)
            cropmove:function(e){
                // console.log("move");
            },
            //3.裁剪框移動結束的時候會執行的函數
            cropend:function(e){
                // console.log("end");
            },

            //2、重置與清除函數
            //1.在裁剪框發生變化的時候會調用的函數
            crop:function(e){
                // console.log("cropChange"); 
            }
        })

//將圖像以及裁剪重置爲初始狀態
cropper.reset();
//清除裁剪框
cropper.clear();
//替換圖片,參數1：替換的圖片，參數二，boolean是否保持原來的比例
cropper.replace("../images/picture.jpg",false);
//解鎖
cropper.enable();
//鎖定
cropper.disable();
//銷燬cropper，並在圖像中將整個cropper銷燬(將插件銷燬)
cropper.destroy();
//移動x軸座標,移動圖片.相對本身的位置
cropper.move(1,0);
//移動y軸座標
cropper.move(0,1);
//移動到x,有一個具體的座標
cropper.moveTo(2,0);
//移動到y
cropper.moveTo(0,2);
//放大
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);

//沿y軸翻轉,當前軸不變，另外一軸爲-1
cropper.scale(-1,1);

//沿x軸翻轉
cropper.scale(1,-1);
//縮放圖片x座標
cropper.scale(-1);
 //縮放圖片X座標
cropper.scaleX(0.5);
//縮放圖片Y座標
cropper.scaleY(2);

//獲取數據信息(裁剪框的數據)
console.log(cropper.getData());
//獲取數據信息(裁剪框的數據)
cropper.setData({width:200,height:100});
//獲取Container的數據信息,沒有setContainerData函數console.log(cropper.getContainerData());
//獲取image的數據信息,就是圖片大小
console.log(cropper.getImageData());
//獲取Canvas的數據信息
console.log(cropper.getCanvasData());
//設置Canvas的數據信息
            console.log(cropper.setCanvasData({left:0,top:0,width:200,height:200}));
//得到裁剪框的詳細數據
console.log(cropper.getCropBoxData());
//得到裁剪框的詳細數據
            console.log(cropper.setCropBoxData({left:0,top:100,width:00,height:200}));
//得到裁剪後的圖片,裁剪後的base64編碼 **********重要***********
$("#message").append(cropper.getCroppedCanvas());
//修改裁剪框的長寬比
cropper.setAspectRatio(1/1);
//設置拖拽模式，none,crop,move
cropper.setDragMode("crop");
//獲取canvas繪製的剪裁圖像。
在這以後，你能夠直接將canvas做爲圖片顯示，或使用canvas.toDataURL方法獲取圖像的數據連接，或者使用canvas.toBlob方法獲取一個blob，並經過FormData方法將它更新到服務器上（若是瀏覽器支持這些API）
cropper.getCroppedCanvas()