這是一個我在寫之前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件,當時想實現用戶資料的頭像上傳功能,而且可以預覽圖片,和對圖片進行簡單的裁剪、旋轉,花了很多時間纔看到了這個插件,感受功能挺全面,代碼實現起來也挺簡單,再加上用的是Bootstrap,對移動端操做也有適配,因而就用了。如今稍微有點時間就記錄一下,方便之後再用的時候查閱。另外也有對應的js版本。javascript
兼容全部支持了Canvas的瀏覽器(IE9+),一小部分功能例外,具體請查看官方文檔。css
Number
0
這個具體每一個值對應的效果我也不是很清楚,推薦在上面的官方示例裏都試一試,我都是比較喜歡2。html
String
'crop'
'crop'
: 在裁剪框外拖動鼠標會生成一個新的裁剪框。'move'
: 在裁剪框外拖動鼠標會移動原圖。'none'
: 在裁剪框外拖動鼠標則什麼也不作。Number
NaN
這個是裁剪框的縱橫比,默認是不限制的。例如1:1的頭像就寫1,16:9可寫成16 / 9
。java
Object
null
The previous cropped data if you had stored, will be passed to setData
method automatically.jquery
(沒怎麼用過,都是直接用setData
方法)git
String
(jQuery selector)''
預覽圖的位置,用jQuery選擇器表示。github
Boolean
true
在更改窗口大小後是否從新渲染cropper。web
Boolean
true
在更改窗口大小後是否恢復裁剪區域。ajax
Boolean
true
檢查圖像是不是跨域圖像。(具體查看官方文檔)json
Boolean
true
(具體查看官方文檔)
Boolean
true
非裁剪區域是否用黑罩遮蓋。
Boolean
true
裁剪區域是否顯示虛線。
Boolean
true
裁剪區域正中央是否顯示+號。
Boolean
true
裁剪區域是否高亮顯示。
Boolean
true
是否顯示背景的黑白方格(相似PS裏透明圖層的顯示方式)。
Boolean
true
cropper初始化完成後是否自動顯示裁剪框
Number
0.8
(80% of the image)自動顯示的裁剪框的大小。所以,數字應當在0~1之間。
Boolean
true
是否容許移動原圖。(若是這裏填false
那麼儘管dragMode的值是move
,在裁剪框外拖動也不會移動原圖)
Boolean
true
是否能夠旋轉原圖。
Boolean
true
是否能夠對原圖進行縱橫拉伸。
例如把原圖寬度拉長爲原來的2倍或者拉長爲原來的-1倍(即水平翻轉)。
Boolean
true
是否能夠對原圖進行縮小放大。
Boolean
true
是否容許在移動端上使用雙指觸摸縮放原圖。
Boolean
true
是否容許使用鼠標滾輪縮放原圖。
Number
0.1
當使用鼠標滾輪縮放時的比例。
Boolean
true
是否容許移動裁剪框。
Boolean
true
是否容許經過拖動裁剪框的邊框來調整裁剪框的大小。
Boolean
true
是否容許經過雙擊來在crop
和move
之間切換dragMode。
Number
200
容器寬度最小值。
Number
100
容器高度最小值。
Number
0
canvas(原圖)寬度最小值。
Number
0
canvas(原圖)高度最小值。
Number
0
剪切框寬度最小值。
Note: This size is relative to the page, not the image.
Number
0
剪切框高度最小值。
Note: This size is relative to the page, not the image.
Function
null
A shortcut of the "ready" event.
Function
null
A shortcut of the "cropstart" event.
Function
null
A shortcut of the "cropmove" event.
Function
null
A shortcut of the "cropend" event.
Function
null
A shortcut of the "crop" event.
Function
null
A shortcut of the "zoom" event.
除了"setAspectRatio","replace"和"destroy"之外,全部的方法都要在ready後才能使用。這裏只介紹幾個經常使用的方法,所有的方法請到官方文檔查閱。
方法的使用格式爲
$().cropper('method',arg0,arg1,arg2,...);
手動顯示裁剪框。
$().cropper({ autoCrop: false, ready: function () { // Do something here // ... // And then $(this).cropper('crop'); } });
恢復所有到初始狀態。
String
A new image url.
Boolean
If not present, its default value is false
.
替換cropper中的圖像文件,一般第二個參數無論。
銷燬cropper,而且會移除img標籤的src屬性的值。
Object
width
: the destination width of the output canvas.height
: the destination height of the output canvas.minWidth
: the minimum destination width of the output canvas, the default value is 0
.minHeight
: the minimum destination height of the output canvas, the default value is 0
.maxWidth
: the maximum destination width of the output canvas, the default value is Infinity
.maxHeight
: the maximum destination height of the output canvas, the default value is Infinity
.fillColor
: a color to fill any alpha values in the output canvas, the default value is transparent
.imageSmoothingEnabled
: set to change if images are smoothed (true
, default) or not (false
).imageSmoothingQuality
: set the quality of image smoothing, one of "low" (default), "medium", or "high".HTMLCanvasElement
fillColor
參數,不然裁剪後的透明部分默認會由黑色填充。獲得裁剪到的圖像的canvas,若是沒有裁剪,那麼就返回的是整個原圖圖像的canvas。
這是最重要的一個方法,經過這個方法就能夠獲得裁剪後的圖像,再使用toDataURL()
獲得base64 dataURL(不指定格式的話會是png格式)或者toBlob()
獲得Blob,而後就能夠很輕鬆地將圖片上傳至服務器上或者顯示在某個img標籤中了。例如:
// 轉換爲png格式的dataURL var dataURL = $().cropper('getCroppedCanvas', { width:100, height:100 }).toDataURL('image/png'); // 轉換爲Blob後顯示在img標籤中 var URL = window.URL || window.webkitURL; $().cropper('getCroppedCanvas', { width:100, height:100 }).toBlob(function (blob) { $().attr('src',URL.createObjectURL(blob)); });
接下來只是實現一個簡單的功能:網頁中能夠上傳圖片,而後對圖片進行裁剪,點擊肯定後會顯示出裁剪後的圖片。
代碼以下:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>裁剪圖片</title> <link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> .row{ margin-bottom: 5px; } #photo { max-width: 100%; } .img-preview { width: 100px; height: 100px; overflow: hidden; } button { margin-top:10px; } #result { width: 150px; height: 150px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <label for="input" class="btn btn-danger" id=""> <span>選擇圖片</span> <input type="file" id="input" class="sr-only"> </label>