cropper插件的使用參考
鏈接：https://pan.baidu.com/s/1KL7d4T_kj8JQ26wBj8QhLA
提取碼：j9hi
cropper介紹
兼容所有支持了Canvas的瀏覽器（IE9+），一小部分功能例外，對(duì)移動(dòng)端操作也有適配，支持裁剪、旋轉(zhuǎn)、翻轉(zhuǎn)等，具體請(qǐng)查看官方文檔。
但是它并沒有對(duì)圖片真正的處理，只是記錄了用戶做了哪些變換，然后需要自己再去處理
cropper使用
一、使用前準(zhǔn)備：
引入源文件
二、option參數(shù)：var options = { '參數(shù)1': '值1', '參數(shù)2': '值2'}; $("#photo").cropper(options); 不完整，想了解全部參數(shù)可查看官方API文檔
viewMode：0(默認(rèn)) [1 / 2 / 3] 對(duì)需裁剪圖片縮放&移動(dòng)的限制。其中：0（沒有限制）、1（圖片縮放時(shí)最小不能小于裁剪框，可任意移動(dòng)）、2（圖片縮放時(shí)最小不能小于它的外容器，圖片移動(dòng)時(shí)上下或左右必須貼著外容器）、3（圖片縮放時(shí)最小不能小于它的外容器，圖片移動(dòng)時(shí)上下左右都必須貼著外容器）
dragMode: 'crop'(默認(rèn)) ['move' / 'none'] 其中：crop（當(dāng)鼠標(biāo)點(diǎn)擊裁剪框外的一處時(shí)根據(jù)這個(gè)點(diǎn)重新生成一個(gè) 裁剪框）、move（可以拖動(dòng)圖片）、none（什么也不做）
aspectRatio: 寬 / 高 值為裁剪框的寬高比（默認(rèn)NaN）
preview: str 值為顯示預(yù)覽圖的容器選擇器，如 div.box
responsive: true [false] 是否響應(yīng)式，在調(diào)整窗口大小時(shí)重新渲染裁剪器
modal: true [false] 是否顯示裁剪框外的黑色半透明背景
cropBoxMovable: true [false] 是否允許拖動(dòng)改變裁剪框大小，默認(rèn)true
guides: true [false] 是否顯示裁剪框上的虛線
center:true [false] 是否顯示裁剪框上的中心指示器
highlight: true [false] 是否高亮顯示裁剪框中的圖像
movable: true [false] 是否允許移動(dòng)圖像
rotatable: true [false] 是否允許旋轉(zhuǎn)圖像
scalable: true [false] 是否允許縮放圖像
事件相關(guān)
ready：初始化完成，只調(diào)用一次
cropstart：移動(dòng)（裁剪框或圖片）開始
cropmove：移動(dòng)（裁剪框或圖片）
cropend：移動(dòng)（裁剪框或圖片）結(jié)束
crop：當(dāng)畫布或裁剪框改變時(shí)
zoom：圖片縮放事件
三、Methods方法（如需要將裁剪后的圖像上傳給服務(wù)器，請(qǐng)仔細(xì)看下面的getCroppedCanvas方法）
由于cropper是異步加載的，所以除 setAspectRatio 和 destroy 之外的事件都應(yīng)該放在ready事件參數(shù)中（下面的方法列表說(shuō)明都是放在ready內(nèi)的，重復(fù)的代碼就不再寫了）：
$("#photo").cropper({
? ready: function () {
? ? $(this).cropper('method', argument1, , argument2, ..., argumentN);
? }
});
crop()：手動(dòng)顯示裁剪框
autoCrop: false,
ready: function () {
? ? $(this).cropper('crop');
}
reset()：將圖像和裁剪框重置為初始狀態(tài)
clear()：清除裁剪框
replace(url[, onlyColorChanged])：替換圖像的 url 并重建cropper
url：新的圖片url地址
onlyColorChanged ：默認(rèn)值為false，如果只改變顏色，而不改變大小，那么cropper只需要改變所有相關(guān)圖像的src，而不需要重建cropper。這可以用于filters應(yīng)用
disable()：凍結(jié)（禁用）cropper
enable()：解凍 cropper
destroy()：銷毀cropper，并從圖像中刪除實(shí)例
move(offsetX[, offsetY])：值為number類型，分別表示水平/垂直 方向的移動(dòng)尺寸（px值，offsetY默認(rèn)值同offsetX）。$(this).cropper('move', 1, -1);
moveTo(x[, y])：將畫布（圖像的容器）移動(dòng)到絕對(duì)點(diǎn)。值為number類型，x, y分別表示畫布的 left / top 值（y默認(rèn)值同x）
zoom(ratio)：以相對(duì)比例縮放畫布（圖像的容器）。值為number類型，ratio>0時(shí)放大，ratio<0時(shí)縮小。$(this).cropper('zoom', -0.1);
zoomTo(ratio)：縮放畫布（圖像的容器）到絕對(duì)比率。值為number類型
rotate(degree)：以相對(duì)角度旋轉(zhuǎn)圖像。值為number類型，正數(shù)向右旋轉(zhuǎn)，負(fù)數(shù)向左旋轉(zhuǎn)。$(this).cropper('rotate', 90);
rotateTo(degree)：旋轉(zhuǎn)圖像到絕對(duì)角度
scale(scaleX[, scaleY])：縮放圖像。值為number類型，參數(shù)分別表示圖像在橫 / 縱坐標(biāo)上的縮放（scaleX默認(rèn)值為1、scaleY默認(rèn)值同scaleX）。$(this).cropper('scale', -1, 1);
scaleX(scaleX)：圖像在橫坐標(biāo)上的縮放。值為number類型（默認(rèn)值為1）
scaleY(scaleY)：圖像在縱坐標(biāo)上的縮放。值為number類型（默認(rèn)值為1）
getData([rounded])：默認(rèn)值為false，設(shè)置true可獲得舍入值。var getData = $image.cropper("getData");。有object類型的記錄用戶操作的返回值，可將此返回值發(fā)送給服務(wù)器端以直接輸出圖像。其中：
x：裁剪框左邊的偏移量
y：裁剪框頂部的偏移量
width：裁剪框的寬
height：裁剪框的高
rotate：圖像旋轉(zhuǎn)角度
scaleX：圖像在橫坐標(biāo)上的縮放
scaleY：圖像在縱坐標(biāo)上的縮放
setData(data)：用新數(shù)據(jù)（基于原始圖像）改變裁剪框的位置和大小（注意：此方法僅在 viewmode 選項(xiàng)大于或等于1時(shí)可用）。data參數(shù)為與getData()返回值相同的Object對(duì)象，如：$(this).cropper("setData", { x: 203, y: 491, width: 393, height: 393, rotate: 90, scaleX: 2, scaleY: 2 });
getContainerData()：返回容器大小數(shù)據(jù)，object類型，參數(shù)為：包含容器的當(dāng)前寬 / 高度
getImageData()：返回object類型的圖像的位置、大小等相關(guān)數(shù)據(jù)：{ left: 0, top: 0, width: 700, height: 393.75, naturalWidth: 1280, naturalHeight: 720, aspectRatio: 1.7, rotate: 0, scaleX: 1, scaleY: 1 }。參數(shù)為：圖像的左偏移量、圖像的上偏移量、圖像的寬、圖像的高、圖像的自然寬度、圖像的自然高度、圖像的縱橫比、圖像的旋轉(zhuǎn)角度、圖像在橫坐標(biāo)上的縮放、圖像在縱坐標(biāo)上的縮放
getCanvasData()：返回object類型的畫布（圖像的容器）的位置和大小數(shù)據(jù)：{ left: 115.7, top: -241.4, width: 476.4, height: 847.0, naturalWidth: 720, naturalHeight: 1280 }。參數(shù)為：圖像的左偏移量、圖像的上偏移量、圖像的寬、圖像的高、圖像的自然寬度、圖像的自然高度
setCanvasData(data)：用新數(shù)據(jù)更改畫布（圖像包裝器）的位置和大小。data參數(shù)為Object類型：{ left: 畫布左邊的新偏移量, top: 畫布上邊的新偏移量, width: 畫布的新寬度, height: 畫布的新高度 }
getCropBoxData()：輸出object類型的裁剪框的位置和大小數(shù)據(jù)：{ left: 裁剪框左側(cè)的偏移量, top: 裁剪框上邊的偏移量, width: 裁剪框的寬度, height: 裁剪框的高度 }
setCropBoxData(data)：用新數(shù)據(jù)更改裁剪框的位置和大小。data參數(shù)為Object類型：{ left: 裁剪框左邊的新偏移量, top: 裁剪框上邊的新偏移量, width: 裁剪框的新寬度, height: 裁剪框的新高度 }
getCroppedCanvas([options])：
options對(duì)象參數(shù)：width（輸出畫布的指定寬度）、height（輸出畫布的指定高度）、minWidth（輸出畫布的最小目標(biāo)寬度，默認(rèn)值為0）、minHeight（輸出畫布的最小目標(biāo)高度，默認(rèn)值為0）、maxWidth（輸出畫布的最大目標(biāo)寬度，默認(rèn)值為0）、maxHeight（輸出畫布的最大目標(biāo)高度，默認(rèn)值為0）、fillColor（用于填充輸出畫布中任何alpha值的顏色，默認(rèn)值是透明的）、imageSmoothingEnabled（設(shè)置圖像是否平滑，默認(rèn)true）、imageSmoothingQuality（設(shè)置圖像平滑的質(zhì)量，low（默認(rèn)） / high）
返回值：畫出剪裁圖像的畫布（一個(gè)canvas DOM）
注意：1)輸出畫布的長(zhǎng)寬比將自動(dòng)擬合到裁剪框的長(zhǎng)寬比（可以理解為把裁剪框內(nèi)的圖像拉伸為options中指定的寬高）；2) 如果希望從輸出畫布中獲取JPEG圖像，應(yīng)該首先設(shè)置fillColor選項(xiàng)，否則JPEG圖像中的透明部分將默認(rèn)為黑色；
重要：可以用此返回值調(diào)用（如果瀏覽器支持這些API）：1) HTMLCanvasElement .toDataURL 獲取base64格式的數(shù)據(jù)、2) HTMLCanvasElement .toBlob 獲取blob，直接將畫布顯示為圖像，且可使用FormData將其上傳到服務(wù)器
//var base64 = $(this).cropper('getCroppedCanvas',{ width:750, height:582 }).toDataURL('image/png');
//$target.attr('src', base64);
$(this).cropper('getCroppedCanvas', {
? width: 160,
? height: 90,
? fillColor: '#fff'
}).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 () {...}
? });
});;
setAspectRatio(aspectRatio)：改變裁剪框的長(zhǎng)寬比，參數(shù)為一個(gè)正數(shù)
setDragMode([mode])：改變拖曳模式?？梢酝ㄟ^雙擊裁剪框來(lái)切換crop和move。mode可選：’none’ / ‘crop’ / ‘move’，默認(rèn)none
