cropper.js裁剪圖片的使用

官網http://fengyuanchen.github.io/cropper/
文檔https://github.com/fengyuanchen/cropper/blob/master/README.md

引入js

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
<!-- 建議把單獨的img標簽放在一個div中 包裹畫布-->
<div class="box">
  <img id="image" src="picture.jpg">
</div>

這里注意，直接設置img的寬高是沒有效果的，但是可以在父盒子上（即.box）設置

官方引入方式
    var cropper = new Cropper(image, {
        aspectRatio: 16 / 9,
        viewMode:1,
        crop: function (e) {
            console.log(e.detail.x);
            console.log(e.detail.y);
            console.log(e.detail.width);
            console.log(e.detail.height);
            console.log(e.detail.rotate);
            console.log(e.detail.scaleX);
            console.log(e.detail.scaleY);
        }
    });
本地引入方式

如果使用的是本地的cropper.js和cropper.css，可能報版本的錯誤，用下面的引入代碼：

    $('#image').cropper({
        aspectRatio: 16 / 9,
        viewMode:1,
        crop: function (e) {
            console.log(e);
        }
    });

參數 options

    1. viewMode：定義cropper的視圖模式
      默認：0
      0：沒有限制，3可以移動到2外。
      1 : 3只能在2內移動。
      2：2圖片 不全部鋪滿1 （即縮小時可以有一邊出現空隙）
      3：2圖片填充整個1
    1. dragMode：定義cropper的拖拽模式
      默認: ‘crop’
      ‘crop’: 可以產生一個新的裁剪框3
      ‘move’: 只可以移動3
      ‘none’: 什么也不處理
    1. aspectRatio：裁剪框的寬高比
      默認：NAN；
      在默認的時候可以隨意改變裁剪框的大小，我這里的設置的值為 16/9。
    1. preview：添加額外的元素(容器)以供預覽
      默認：“ ”；
      注意這里是一個dom元素，必須可以被Document.querySelectorAll獲取到。
      preview:".small",
      <div class="small"></div>
      一定要設置small的寬高，如果想顯示出裁剪的區(qū)域需要加上樣式 overflow: hidden;
    1. data：如果已經存儲了以前的數據，那么在構建時將會自動將其傳遞給setData方法。
      默認：null；
    1. responsive：在調整窗口大小的時候重新渲染cropper
      默認：true；
    1. restore：在調整窗口大小后恢復裁剪的區(qū)域
      默認：true；
    1. checkCrossOrigin：檢查當前圖像是否為跨域圖像
      默認：true；
    1. checkOrientation：檢查當前圖像的Exif定向信息
      默認：true；
    1. modal：顯示圖片上方的黑色模態(tài)并在裁剪框下面
      默認：true；
    1. guides：顯示在裁剪框上方的虛線
      默認：true；
    1. center：裁剪框在圖片正中心
      默認：true；
    1. highlight：在裁剪框上方顯示白色的區(qū)域(突出裁剪框)
      默認：true；
    1. background：顯示容器的網格背景
      就是后面的馬賽克
      默認：true；
    1. autoCrop：當初始化時，可以自動生成圖像
      就是自動顯示裁剪框，改成false裁剪框自動消失
      默認：true；
    1. autoCropArea：定義自動裁剪面積大小(百分比)和圖片進行對比
      默認：0.8；
      就是裁剪框顯示的大小
    1. movable：是否允許可以移動后面的圖片
      默認：true；
    1. rotatable：是否允許旋轉圖像
      默認：true；
    1. scalable：是否允許縮放圖像
      默認：true；
    1. zoomable：是否允許放大圖像
      默認：true；
    1. zoomOnTouch：是否可以通過拖動觸摸來放大圖像
      默認：true；
    1. zoomOnWheel：是否可以通過移動鼠標來放大圖像
      默認：true；
    1. wheelZoomRatio：用鼠標移動圖像時，定義縮放比例
      默認：0.1；
    1. cropBoxMovable：是否通過拖拽來移動剪裁框
      默認：true；
      改成false效果圖為：剪裁框不可以拖動
    1. cropBoxResizable：是否通過拖動來調整剪裁框的大小
      默認：true；
      改成false效果圖為：剪裁框不可以調整大小
    1. toggleDragModeOnDblclick：當點擊兩次時可以在“crop”和“move”之間切換拖拽模式
      默認：true；
    1. minContainerWidth：容器的最小寬度
      默認：200；
    1. minContainerHeight：容器的最小高度
      默認：100；
    1. minCanvasWidth：canvas的最小寬度
      默認：0；
    1. minCanvasHeight：canvas的最小高度
      默認：0；
    1. minCropBoxWidth：裁剪層的最小寬度
      默認：0；
    1. minCropBoxHeight：裁剪層的最小高度
      默認：0；
    1. ready：插件準備完成執(zhí)行的函數（只執(zhí)行一次）
      類型：Function
      默認：null；
    1. cropstart—剪裁框開始移動執(zhí)行的函數
      類型：Function
      默認：null；
    1. cropmove—剪裁框移動時執(zhí)行的函數
      類型：Function
      默認：null；
    1. cropend—剪裁框移動結束執(zhí)行的函數
      類型：Function
      默認：null；
    1. crop—剪裁框發(fā)生變化執(zhí)行的函數
      類型：Function
      默認：null；
    1. zoom—剪裁框縮放的時候執(zhí)行的函數
      類型：Function
      默認：null；

Methods 方法

    1. crop() 手動顯示裁剪框
$("#image").cropper({
  autoCrop: false, //關閉自動顯示裁剪框
  ready: function () {
    $(this).cropper('crop');
  }
});
    1. reset()：將圖像和裁剪框重置為初始狀態(tài)
    1. clear()：清除裁切框
    1. replace(url[, onlyColorChanged])：替換圖像的src并重新構建cropper
      url：類型String，新圖片的url
      onlyColorChanged (optional)：類型Boolean，默認false；
      如果只是改變顏色，而不是大小，那么cropper只需要改變所有相關圖像的src，不需要重新構建cropper。這可以用于應用過濾器。（意思是：改成true，圖像的比例會發(fā)生變化自適應父盒子的大??；會失真的）
    $("#replace").on("click", function () {
        $('#image').cropper('replace',"./images/111.jpeg",true );
    })
    1. enable()：解鎖，鎖定的裁切框（與disable相對應）
    1. disable()：鎖定的裁切框（裁切框不可移動）（與enable相對應）
    1. destroy()：銷毀cropper并從圖像中刪除整個cropper
    1. move(offsetX[, offsetY])：使用相對偏移量移動圖像(裁切框不移動)
    1. moveTo(x[, y])：將畫布(圖像包裝器)移動到一個絕對點
    1. zoom(ratio)：放大圖片，并使用相對比例（裁切框不變化）
    1. zoomTo(ratio)：將畫布(圖像包裝器)放大到一個絕對比例
    1. rotate(degree)：旋轉圖像以一定的角度
    1. rotateTo(degree)：旋轉圖像到固定的角度
    1. scale(scaleX[, scaleY])：翻轉圖像
      scaleX：類型Number；水平方向翻轉；默認為 1
      scaleY：類型Number；垂直方向翻轉；如果不存在，其值和scaleX相同；
$('#image').cropper('scale', -1); // 水平、垂直方向翻轉
$('#image').cropper('scale', -1, 1); // 水平方向翻轉
$('#image').cropper('scale', 1, -1); // 垂直方向翻轉
    1. scaleX(scaleX)：縮放圖像的橫坐標
    1. scaleY(scaleY)：縮放圖像的縱坐標
    1. getData([rounded])：輸出最終裁剪的區(qū)域位置和大小數據(根據原始圖像的自然大小)
      rounded 類型Boolean；默認false；設置true可以獲取其所有數據；
      返回的數據類型：Object；
      x裁切框距離左邊的距離
      y裁切框距離頂部的距離
      width裁切框的寬度
      height裁切框的高度
      rotate裁切框的旋轉的角度
      scaleX縮放圖像的橫坐標
      scaleY縮放圖像的縱坐標
    $("#getData").on("click", function () {
        console.log($('#image').cropper('getData', true));;
    })
    1. setData(data)：用新數據改變裁切區(qū)域的位置和大小(以原始圖像為基礎)
    1. getContainerData()：輸出container 容器大小數據
    1. getImageData()：輸出圖像image位置、大小和其他相關數據
      返回的數據類型：Object；
      leftimage距離左邊的距離
      topimage距離頂部的距離
      widthimage的寬度
      heightimage的高度
      naturalWidth image的原始寬度
      naturalHeight image的原始高度
      aspectRatio image的縱橫比
      rotateimage的旋轉的角度
      scaleX縮放圖像的橫坐標
      scaleY縮放圖像的縱坐標
    $("#getImageData").on("click", function () {
        console.log($('#image').cropper('getImageData', ));;
    })
    1. getCanvasData()：輸出畫布Canvas(圖像包裝器)位置和大小數據
      返回的數據類型：Object；
      leftcanvas距離左邊的距離
      topcanvas距離頂部的距離
      widthcanvas的寬度
      heightcanvas的高度
      naturalWidth canvas的原始寬度
      naturalHeight canvas的原始高度
      注意：getImageData() 和 getCanvasData()的naturalWidth、naturalHeight的值是一樣的
    1. setCanvasData(data)：使用數據更改畫布Canvas(圖像包裝器)位置和大小
    1. getCropBoxData()：輸出剪切框的位置和大小數據
    1. setCropBoxData(data)：改變剪切框的位置和大小數據
    1. getCroppedCanvas([options])：畫一張剪裁的圖片，如果沒有剪裁，則返回一個繪制整個im的畫布
      options 類型Object
      width 輸出Canvas的寬度
      height 輸出Canvas的高度
      minWidth 輸出Canvas的最小寬度；默認值是0
      minHeight 輸出Canvas的最小高度；默認值是0
      maxWidth 輸出Canvas的最大寬度；默認值是Infinity（無窮大）
      maxHeight 輸出Canvas的最大高度；默認值是Infinity（無窮大）
      fillColor 在輸出畫布Canvas中填充任何alpha的顏色，默認值是透明的
      imageSmoothingEnabled 如果圖像被設置為平滑(true，默認)或不設置(false)。
      imageSmoothingQuality 設置圖像的質量，一個“l(fā)ow”(默認)、“medium”或“high”。
      返回值類型：HTMLCanvasElement
      畫布繪制出了剪裁過的圖像
      注意：輸出canvas畫布的寬高比將自動適應剪切框的縱橫比
      如果您打算從輸出畫布canvas中獲得一個JPEG圖像，您應該首先設置填色選項，否則，JPEG圖像中的透明部分將在缺少情況下變?yōu)楹谏?/em>
      為了避免獲得空白的輸出圖像，您可能需要將maxWidth和maxHeightproperties設置為有限的數字，從而來畫布元素的大小限制。 
    $("#getCroppedCanvas").on("click", function () {
        console.log($('#image').cropper('getCroppedCanvas'));;
        var cas=$('#image').cropper('getCroppedCanvas');
        var base64url=cas.toDataURL('image/jpeg');
        cas.toBlob(function (e) {
            console.log(e);  //生成Blob的圖片格式
        })
        console.log(base64url); //生成base64圖片的格式
        $('.cavans').html(cas)  //在body顯示出canvas元素
    })

$('#image').cropper('getCroppedCanvas', {
  width: 160,
  height: 90,
  minWidth: 256,
  minHeight: 256,
  maxWidth: 4096,
  maxHeight: 4096,
  fillColor: '#fff',
  imageSmoothingEnabled: false,
  imageSmoothingQuality: 'high',
});

// Upload cropped image to server if the browser supports `HTMLCanvasElement.toBlob`
$('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
  var formData = new FormData();
  formData.append('croppedImage', blob);
  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });
});
    1. setAspectRatio(aspectRatio)：改變裁切框的寬高比
    1. setDragMode([mode])：設置拖拽模式
      就是鼠標顯示的是十字還是那種帶箭頭的十字
      mode 類型String
      取值：none、crop、move；
      默認none

Events事件

    1. ready：當一個cropper實例完全構建時，這個事件就會發(fā)生
    1. cropstart：當畫布(圖像包裝器)或剪切框開始發(fā)生變化時，該事件就會發(fā)生
      返回的參數有：
      event.originalEvent 類型event；
      mousedown、touchstart 和 pointerdown 即觸發(fā)的事件源
      event.action 發(fā)生事件的行為（移動的方向）：
      crop：創(chuàng)建一個剪切框的時候
      move：移動圖片的時
      zoom：放大縮小canvas的時候
      e：調整剪切框東側的大小
      w：調整剪切框西側的大小
      s：調整剪切框南側的大小
      n：調整剪切框北側的大小
      se：東南
      sw：西南
      ne：東北
      nw：西北
      all：所有方向
$('#image').on('cropstart', function (e) {
  console.log(e.type); // cropstart
  console.log(e.namespace); // cropper
  console.log(e.action); // ...
  console.log(e.originalEvent.pageX);

  // Prevent to start cropping, moving, etc if necessary
  if (e.action === 'crop') {
    e.preventDefault();
  }
});
    1. cropmove：當畫布(圖像包裝器)或剪切框正在發(fā)生變化時，該事件就會發(fā)生
    1. cropend：當畫布(圖像包裝器)或剪切框正在發(fā)生變化結束時，該事件就會發(fā)生
    1. crop：當畫布(圖像包裝器)或農作物盒發(fā)生改變時，該事件就會發(fā)生
    1. zoom：當一個cropper實例開始放大或縮小畫布(圖像包裝器)時，這個事件就會發(fā)生
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容