插件下載地址及檔案說明
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()
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21673.html
標籤：jQuery
上一篇：jQuery-File-Upload 使用，jQuery-File-Upload上傳插件
下一篇：Vue/Cli4 參考靜態圖片