js截取圖片裁剪圖片之cropper.js插件用法詳解

源碼：https://github.com/fengyuanchen/cropper

引入+使用

<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>

HTML結構

<!-- 用一個塊元素(容器)包裝圖像或畫布元素 -->
<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；就會報錯（絕對的版本號的問題v1.x版本），而使用cdn方法報錯就可以解除；
cdn的鏈接；如果使用本地的文件（v3.x版本）則寫法變爲

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

一個簡單的demo就出現了；效果圖
；

參數options

viewMode—定義cropper的視圖模式

類型:number；默認：0；可以使用0,1,2,3；

0：沒有限制，3可以移動到2外。
1 : 3只能在2內移動。
2：2圖片不全部鋪滿1 （即縮小時可以有一邊出現空隙）
3：2圖片填充整個1
dragMode —-定義cropper的拖拽模式。

類型: String
默認: ‘crop’
選項:
‘crop’: 可以產生一個新的裁剪框3
‘move’: 只可以移動3
‘none’: 什麼也不處理
aspectRatio—-裁剪框的寬高比

類型:number；默認：NAN；
在默認的時候。可以隨意改變裁剪框的大小；我這裏的設置的值爲 16/9;
data—如果您已經存儲了以前的數據，那麼在構建時將會自動將其傳遞給setData方法。(具體怎麼用還不知道)

類型:object；默認：null；
preview—-添加額外的元素(容器)以供預覽

類型：Element / String 默認：“ ”；
注意這裏是一個dom元素。必須可以被Document.querySelectorAll獲取到；
preview:".small",
HTML結構：<div class="small"></div>；注意一定要設置small的寬高；最好和裁剪比例一致；還有如果要想正確的顯示出裁剪的區域需要加上樣式overflow: hidden;

去掉overflow: hidden;效果圖如下：

感覺成了一個放大鏡；
responsive—在調整窗口大小的時候重新渲染cropper

類型：Boolean 默認：true；
restore—在調整窗口大小後恢復裁剪的區域。

類型：Boolean 默認：true；
checkCrossOrigin—-檢查當前圖像是否爲跨域圖像。

類型：Boolean 默認：true；
checkOrientation—-檢查當前圖像的Exif定向信息。（不知道幹什麼用的）

類型：Boolean 默認：true；
好像是移動端選擇發生旋轉變化的時候，觸發的事件。
modal—顯示圖片上方的黑色模態並在裁剪框下面。

類型：Boolean 默認：true；
改成false效果圖爲：
guides—顯示在裁剪框上方的虛線。

類型：Boolean 默認：true；
改成false效果圖爲：
center—裁剪框在圖片正中心。

類型：Boolean 默認：true；
highlight–在裁剪框上方顯示白色的區域(突出裁剪框)。

類型：Boolean 默認：true；
background–顯示容器的網格背景。（就是後面的馬賽克）

類型：Boolean 默認：true；
autoCrop–當初始化時，可以自動生成圖像。（就是自動顯示裁剪框，改成false裁剪框自動消失）

類型：Boolean 默認：true；
改成false效果圖爲：
autoCropArea–定義自動裁剪面積大小(百分比)和圖片進行對比。

類型：number 默認：0.8；
就是裁剪框顯示的大小
movable–是否允許可以移動後面的圖片

類型：Boolean 默認：true；
rotatable–是否允許旋轉圖像。

類型：Boolean 默認：true；
scalable–是否允許縮放圖像。

類型：Boolean 默認：true；
zoomable–是否允許放大圖像。

類型：Boolean 默認：true；
zoomOnTouch–是否可以通過拖動觸摸來放大圖像。

類型：Boolean 默認：true；
zoomOnWheel–是否可以通過移動鼠標來放大圖像。

類型：Boolean 默認：true；
wheelZoomRatio–用鼠標移動圖像時，定義縮放比例。

類型：Number 默認：0.1；
cropBoxMovable—是否通過拖拽來移動剪裁框。

類型：Boolean 默認：true；
改成false效果圖爲：剪裁框不可以拖動。
cropBoxResizable—是否通過拖動來調整剪裁框的大小。

類型：Boolean 默認：true；
改成false效果圖爲：剪裁框不可以調整大小。
toggleDragModeOnDblclick—當點擊兩次時可以在“crop”和“move”之間切換拖拽模式，

類型：Boolean 默認：true；
minContainerWidth—容器的最小寬度。

類型：Number 默認：200；
minContainerHeight—容器的最小高度。

類型：Number 默認：100；
minCanvasWidth—canvas的最小寬度。

類型：Number 默認：0；
minCanvasHeight—canvas的最小高度。

類型：Number 默認：0；
minCropBoxWidth—裁剪層的最小寬度。

類型：Number 默認：0；
minCropBoxHeight—裁剪層的最小高度。

類型：Number 默認：0；
ready—插件準備完成執行的函數（只執行一次）。

類型：Function 默認：null；
cropstart—剪裁框開始移動執行的函數。

類型：Function 默認：null；
cropmove—剪裁框移動時執行的函數。

類型：Function 默認：null；
cropend—剪裁框移動結束執行的函數。

類型：Function 默認：null；
crop—剪裁框發生變化執行的函數。

類型：Function 默認：null；
zoom—剪裁框縮放的時候執行的函數。

類型：Function 默認：null；

 $('#image').cropper({
        aspectRatio: 16 / 9,
        viewMode:1,
        dragMode:'none',
        preview:".small",
        responsive:false,
        restore:false,
//        modal:false,
//        guides:false,
//        background:false,
//        autoCrop:false,
//        autoCropArea:0.1,
//        movable:false,
//        scalable:false,
//        zoomable:false,
//        wheelZoomRatio:false,
//        cropBoxMovable:false,
//        cropBoxResizable:false,
        ready:function () {
            console.log("ready");
        },
        cropstart: function (e) {
            console.log("cropstart");
        },
        cropmove: function (e) {
            console.log("cropmove");
        },
        cropend: function (e) {
            console.log("cropend");
        },
        crop: function (e) {
            console.log("crop");
        },
        zoom: function (e) {
            console.log("zoom");
        },
    });

Methods 方法

使用方法示例：

$().cropper({
  ready: function () {
    $().cropper('method', argument1, , argument2, ..., argumentN);
  }
});

crop() 手動顯示裁剪框

$("#image").cropper({
  autoCrop: false, //關閉自動顯示裁剪框
  ready: function () {
    $(this).cropper('crop');
  }
});

2 . reset()—-將圖像和裁剪框重置爲初始狀態

<button id="reset">reset</button>
//-----------------------------
$("#reset").on("click", function () {
        $('#image').cropper('reset');
   })

3 . clear()—清除裁切框

$("#clear").on("click", function () {
        $('#image').cropper('clear');
    })

4 . replace(url[, onlyColorChanged])—替換圖像的src並重新構建cropper

url :–類型String；—新圖片的url；
onlyColorChanged (optional):–類型：Boolean默認：false；—-如果只是改變顏色，而不是大小，那麼cropper只需要改變所有相關圖像的src，不需要重新構建cropper。這可以用於應用過濾器。（意思是：改成true，圖像的比例會發生變化自適應父盒子的大小；會失真的）

$("#replace").on("click", function () {
        $('#image').cropper('replace',"./images/111.jpeg",true );
    })

5 . enable()—解鎖，鎖定的裁切框（與disable相對應）

$("#enable").on("click", function () {
        $('#image').cropper('enable');
    })

6 . disable()—鎖定的裁切框（裁切框不可移動）（與enable相對應）

$("#disable").on("click", function () {
        $('#image').cropper('disable');
    })

7 . destroy()—銷燬cropper並從圖像中刪除整個cropper。

$("#destroy").on("click", function () {
        $('#image').cropper('destroy');
    })

8 . move(offsetX[, offsetY])—使用相對偏移量移動圖像(裁切框不移動)。

offsetX–類型：Number；在水平方向上移動（px）
offsetY –類型：Number；在垂直方向上移動（px）；如果不存在，其值和offsetX相同；

    $("#move1").on("click", function () {
        $('#image').cropper('move', 1, 0);
    })
    $("#move2").on("click", function () {
        $('#image').cropper('move', 0, -1);
    })

9 . moveTo(x[, y])—-將畫布(圖像包裝器)移動到一個絕對點

X–類型：Number；畫布canvas距離left的值；
Y –類型：Number；畫布canvas距離top的值；如果不存在，其值和X相同；

10 . zoom(ratio)—放大圖片，並使用相對比例。（裁切框不變化）

$('#image').cropper('zoom', 0.1);
$('#image').cropper('zoom', -0.1);

11 . zoomTo(ratio)—-將畫布(圖像包裝器)放大到一個絕對比例

ratio:類型Number—要放大的比例

$('#image').cropper('zoomTo', 1); // 1:1 (canvasData.width === canvasData.naturalWidth)

12 . rotate(degree)—旋轉圖像以一定的角度

degree—類型: Number
向右旋轉 (degree > 0)；向左旋轉 (degree < 0)；

$('#image').cropper('rotate', 90);
$('#image').cropper('rotate', -90);

13 . rotateTo(degree)—旋轉圖像到固定的角度

degree—類型: Number

14 . scale(scaleX[, scaleY])—-翻轉圖像

scaleX–類型：Number；水平方向翻轉；默認爲 1
scaleY–類型：Number；垂直方向翻轉；如果不存在，其值和scaleX相同；

$('#image').cropper('scale', -1); // 水平、垂直方向翻轉
$('#image').cropper('scale', -1, 1); // 水平方向翻轉
$('#image').cropper('scale', 1, -1); // 垂直方向翻轉

15 . scaleX(scaleX)—-縮放圖像的橫座標。

類型：Number；水平方向翻轉；默認爲 1

16 . scaleY(scaleY)—-縮放圖像的縱座標。

類型：Number；垂直方向翻轉；默認爲 1

$('#image').cropper('scaleX', 1);

17 . getData([rounded])—-輸出最終裁剪的區域位置和大小數據(根據原始圖像的自然大小

rounded 類型：Boolean 默認：false；設置true可以獲取其所有數據；
返回的數據類型：Object；
- x裁切框距離左邊的距離
- y裁切框距離頂部的距離
- width裁切框的寬度
- height裁切框的高度
- rotate裁切框的旋轉的角度
- scaleX縮放圖像的橫座標
- scaleY縮放圖像的縱座標

$("#getData").on("click", function () {
        console.log($('#image').cropper('getData', true));;
    })

18 . setData(data)—用新數據改變裁切區域的位置和大小(以原始圖像爲基礎)。

data–類型：Object；

 $("#setData").on("click", function () {
        $('#image').cropper('setData',{width:200,height:100});
    })

19 . getContainerData()—輸出container 容器大小數據。

返回的數據類型：Object；

width當前容器的寬

height當前容器的高

$("#getContainerData").on("click", function () {
        console.log($('#image').cropper('getContainerData', ));;
    })

20 . 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', ));;
    })

21 . getCanvasData()—輸出畫布Canvas(圖像包裝器)位置和大小數據。

返回的數據類型：Object；
- leftcanvas距離左邊的距離
- topcanvas距離頂部的距離
- widthcanvas的寬度
- heightcanvas的高度
- naturalWidth canvas的原始寬度
- naturalHeight canvas的原始高度

；
*注意*getImageData（）和getCanvasData()的naturalWidth、naturalHeight的值是一樣的；
22 . setCanvasData(data)—：使用數據更改畫布Canvas(圖像包裝器)位置和大小。

返回的數據類型：Object；
- leftcanvas距離左邊的距離
- topcanvas距離頂部的距離
- widthcanvas的寬度
- heightcanvas的高度

$("#setCanvasData").on("click", function () {
        $('#image').cropper('setCanvasData',{width:200,height:100});
    })

23 .getCropBoxData()—輸出剪切框的位置和大小數據。

返回的數據類型：Object；
- left剪切框距離左邊的距離
- top剪切框距離頂部的距離
- width剪切框的寬度
- height剪切框的高度

$("#getCropBoxData").on("click", function () {
        console.log($('#image').cropper('getCropBoxData'));;
    })

24 . setCropBoxData(data)—–改變剪切框的位置和大小數據。

data的數據類型：Object；
- left剪切框距離左邊的距離
- top剪切框距離頂部的距離
- width剪切框的寬度
- height剪切框的高度

$("#setCropBoxData").on("click", function () {
        $('#image').cropper('setCropBoxData',{width:200,height:100});
    })

25 . 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設置圖像的質量，一個“low”(默認)、“medium”或“high”。
返回值：類型：HTMLCanvasElement畫布繪製出了剪裁過的圖像
注意：輸出canvas畫布的寬高比將自動適應剪切框的縱橫比。
如果您打算從輸出畫布canvas中獲得一個JPEG圖像，您應該首先設置填色選項，否則，JPEG圖像中的透明部分將在缺少情況下變爲黑色。
爲了避免獲得空白的輸出圖像，您可能需要將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');
    }
  });
});

26 . setAspectRatio(aspectRatio)—改變裁切框的寬高比。

aspectRatio:類型number；是一個正數

$("#setAspectRatio").on("click", function () {
        $('#image').cropper('setAspectRatio',1/1);
    })

27 . setDragMode([mode])—-設置拖拽模式（就是鼠標顯示的是十字還是那種帶箭頭的十字）

mode 類型String ；取值：none、crop、move；默認是none

Events 事件

ready—當一個cropper實例完全構建時，這個事件就會發生。
cropstart—當畫布(圖像包裝器)或剪切框開始發生變化時，該事件就會發生。

返回的參數有event.originalEvent:；類型event；參數： mousedown, touchstart 和 pointerdown ；即觸發的事件源
event.action:：發生事件的行爲（移動的方向）

crop：創建一個剪切框的時候

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();
  }
});

cropmove—當畫布(圖像包裝器)或剪切框正在發生變化時，該事件就會發生；

返回的參數有event.originalEvent:；類型event；參數： mousemove, touchmove 和 pointermove ；即觸發的事件源
event.action:：發生事件的行爲（移動的方向）和 cropstart的相同

cropend—當畫布(圖像包裝器)或剪切框正在發生變化結束時，該事件就會發生；

返回的參數有event.originalEvent:；類型event；參數： mouseup, touchend、pointerup 、pointercancel和 touchcancel ；即觸發的事件源
event.action:：發生事件的行爲（移動的方向）和 cropstart的相同

crop—當畫布(圖像包裝器)或農作物盒發生改變時，該事件就會發生。

event.x

event.y

event.width

event.height

event.rotate

event.scaleX

event.scaleY
這些參數的含義去參照getData；

zoom—當一個cropper實例開始放大或縮小畫布(圖像包裝器)時，這個事件就會發生。

返回的參數有
event.originalEvent:；類型event；參數： wheel, touchmove ；即觸發的事件源
event.oldRatio:類型number；當前canvas的裁切比例
event.ratio:類型number；新的canvas的裁切比例(canvasData.width / canvasData.naturalWidth)

$().on('zoom', function (e) {

  // Zoom in
  if (e.ratio > e.oldRatio) {

    // Prevent zoom in
    e.preventDefault();
  }

  // Zoom out
  // ...
});

最後女神鎮樓

自己寫的比較好理解；
究極的demo

代碼下載地址：https://github.com/melodyne/cropper

js截取圖片裁剪圖片之cropper.js插件用法詳解

js截取圖片裁剪圖片之cropper.js插件用法詳解

引入+使用

參數options

Methods 方法

Events 事件

Mac pecl安裝php的sqlsrv擴展連接sqlserver

js截取圖片裁剪圖片之cropper.js插件用法詳解

Linux編譯安裝RabbitMQ

MySql全量備份和增量備份

Mac MAMP修改mysql配置文件my.cnf，修改PHP配置文件php.ini

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

js截取圖片 裁剪圖片之cropper.js插件用法詳解

js截取圖片 裁剪圖片之cropper.js插件用法詳解

引入+使用

參數options

Methods 方法

Events 事件

js截取圖片裁剪圖片之cropper.js插件用法詳解

js截取圖片裁剪圖片之cropper.js插件用法詳解