插件下載地址及文檔說明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css"> <script src="../js/cropper.js"></script> <script src="https://cdn.stat ...
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"); }, //二、重置與清除函數 //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()
