當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件

發布時間：2025/6/16 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

插件介紹

這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件，當時想實現用戶資料的頭像上傳功能，并且能夠預覽圖片，和對圖片進行簡單的裁剪、旋轉，花了不少時間才看到了這個插件，感覺功能挺全面，代碼實現起來也挺簡單，再加上用的是Bootstrap，對移動端操作也有適配，于是就用了?，F在稍微有點時間就記錄一下，方便以后再用的時候查閱。另外也有對應的js版本。

官方文檔（英文）

jQuery
- GitHub項目地址
- 官方示例
js
- GitHub項目地址

兼容性

兼容所有支持了Canvas的瀏覽器（IE9+），一小部分功能例外，具體請查看官方文檔。

參數

viewMode

Type: Number
Default: 0
Options: 0,1,2,3

這個具體每個值對應的效果我也不是很清楚，推薦在上面的官方示例里都試一試，我都是比較喜歡2。

dragMode

Type: String
Default: 'crop'
Options:
- 'crop'：在裁剪框外拖動鼠標會生成一個新的裁剪框。
- 'move'：在裁剪框外拖動鼠標會移動原圖。
- 'none'：在裁剪框外拖動鼠標則什么也不做。

aspectRatio

Type: Number
Default: NaN

這個是裁剪框的縱橫比，默認是不限制的。例如1:1的頭像就寫1,16:9可寫成16 / 9。

data

Type: Object
Default: null

The previous cropped data if you had stored, will be passed to setData method automatically.

（沒怎么用過，都是直接用setData方法）

preview

Type: String (jQuery selector)
Default: ''

預覽圖的位置，用jQuery選擇器表示。

responsive

Type: Boolean
Default: true

在更改窗口大小后是否重新渲染cropper。

restore

Type: Boolean
Default: true

在更改窗口大小后是否恢復裁剪區域。

checkCrossOrigin

Type: Boolean
Default: true

檢查圖像是否是跨域圖像。（具體查看官方文檔）

checkOrientation

Type: Boolean
Default: true

（具體查看官方文檔）

modal

Type: Boolean
Default: true

非裁剪區域是否用黑罩遮蓋。

guides

Type: Boolean
Default: true

裁剪區域是否顯示虛線。

center

Type: Boolean
Default: true

裁剪區域正中央是否顯示+號。

highlight

Type: Boolean
Default: true

裁剪區域是否高亮顯示。

background

Type: Boolean
Default: true

是否顯示背景的黑白方格（類似PS里透明圖層的顯示方式）。

autoCrop

Type: Boolean
Default: true

cropper初始化完成后是否自動顯示裁剪框

autoCropArea

Type: Number
Default: 0.8 (80% of the image)

自動顯示的裁剪框的大小。因此，數字應當在0~1之間。

movable

Type: Boolean
Default: true

是否允許移動原圖。（如果這里填false那么盡管dragMode的值是move，在裁剪框外拖動也不會移動原圖）

rotatable

Type: Boolean
Default: true

是否可以旋轉原圖。

scalable

Type: Boolean
Default: true

是否可以對原圖進行縱橫拉伸。

例如把原圖寬度拉長為原來的2倍或者拉長為原來的-1倍（即水平翻轉）。

zoomable

Type: Boolean
Default: true

是否可以對原圖進行縮小放大。

zoomOnTouch

Type: Boolean
Default: true

是否允許在移動端上使用雙指觸摸縮放原圖。

zoomOnWheel

Type: Boolean
Default: true

是否允許使用鼠標滾輪縮放原圖。

wheelZoomRatio

Type: Number
Default: 0.1

當使用鼠標滾輪縮放時的比例。

cropBoxMovable

Type: Boolean
Default: true

是否允許移動裁剪框。

cropBoxResizable

Type: Boolean
Default: true

是否允許通過拖動裁剪框的邊框來調整裁剪框的大小。

toggleDragModeOnDblclick

Type: Boolean
Default: true

是否允許通過雙擊來在crop和move之間切換dragMode。

minContainerWidth

Type: Number
Default: 200

容器寬度最小值。

minContainerHeight

Type: Number
Default: 100

容器高度最小值。

minCanvasWidth

Type: Number
Default: 0

canvas（原圖）寬度最小值。

minCanvasHeight

Type: Number
Default: 0

canvas（原圖）高度最小值。

minCropBoxWidth

Type: Number
Default: 0

剪切框寬度最小值。

Note: This size is relative to the page, not the image.

minCropBoxHeight

Type: Number
Default: 0

剪切框高度最小值。

Note: This size is relative to the page, not the image.

ready

Type: Function
Default: null

A shortcut of the "ready" event.

cropstart

Type: Function
Default: null

A shortcut of the "cropstart" event.

cropmove

Type: Function
Default: null

A shortcut of the "cropmove" event.

cropend

Type: Function
Default: null

A shortcut of the "cropend" event.

crop

Type: Function
Default: null

A shortcut of the "crop" event.

zoom

Type: Function
Default: null

A shortcut of the "zoom" event.

常用方法

除了"setAspectRatio","replace"和"destroy"以外，所有的方法都要在ready后才能使用。這里只介紹幾個常用的方法，全部的方法請到官方文檔查閱。

方法的使用格式為

$().cropper('method',arg0,arg1,arg2,...);

crop()

手動顯示裁剪框。

$().cropper({autoCrop: false,ready: function () {// Do something here// ...// And then$(this).cropper('crop');} });

reset()

恢復全部到初始狀態。

replace(url[, onlyColorChanged])

url:
- Type: String
- A new image url.
onlyColorChanged (optional):
- Type: Boolean
- If only change the color, not the size, then the cropper only need to change the srcs of all related images, not need to rebuild the cropper. This can be used for applying filters.
- If not present, its default value is false.

替換cropper中的圖像文件，通常第二個參數不管。

destroy()

銷毀cropper，并且會移除img標簽的src屬性的值。

getCroppedCanvas([options])

options (optional):
- Type: Object
- Properties:
  - 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".
(return value):
- Type: HTMLCanvasElement
- A canvas drawn the cropped image.
Notes:
- 輸出的canvas的縱橫比會自動適應于裁剪框的縱橫比.
- 如果打算得到JPEG圖像，那么應該先設置fillColor參數，否則裁剪后的透明部分默認會由黑色填充。
Browser support:
- Basic image: requires Canvas support (IE 9+).
- Rotated image: requires CSS3 2D Transforms support (IE 9+).
- Cross-origin image: requires HTML5 CORS settings attributes support (IE 11+).

得到裁剪到的圖像的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)); });

簡單實例

在頁面直接使用cropper

接下來只是實現一個簡單的功能：網頁中可以上傳圖片，然后對圖片進行裁剪，點擊確定后會顯示出裁剪后的圖片。

代碼如下：

<!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></div></div><div class="row"><div class="col-sm-6 col-sm-offset-2"><img src="" id="photo"></div><div class="col-sm-2"><div><p>預覽(100*100)：</p><div class="img-preview"></div></div><button class="btn btn-primary" onclick="crop()">裁剪圖片</button><div><br/><p>結果：</p><img src="" alt="裁剪結果" id="result"></div></div></div> </div>  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script>// 修改自官方demo的jsvar initCropper = function (img, input){var $image = img;var options = {aspectRatio: 1, // 縱橫比viewMode: 2,preview: '.img-preview' // 預覽圖的class名};$image.cropper(options);var $inputImage = input;var uploadedImageURL;if (URL) {// 給input添加監聽$inputImage.change(function () {var files = this.files;var file;if (!$image.data('cropper')) {return;}if (files && files.length) {file = files[0];// 判斷是否是圖像文件if (/^image\/\w+$/.test(file.type)) {// 如果URL已存在就先釋放if (uploadedImageURL) {URL.revokeObjectURL(uploadedImageURL);}uploadedImageURL = URL.createObjectURL(file);// 銷毀cropper后更改src屬性再重新創建cropper$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);$inputImage.val('');} else {window.alert('請選擇一個圖像文件！');}}});} else {$inputImage.prop('disabled', true).addClass('disabled');}}var crop = function(){var $image = $('#photo');var $target = $('#result');$image.cropper('getCroppedCanvas',{width:300, // 裁剪后的長寬height:300}).toBlob(function(blob){// 裁剪后將圖片放到指定標簽$target.attr('src', URL.createObjectURL(blob));});}$(function(){initCropper($('#photo'),$('#input'));});</script> </body> </html>

在bootstrap模態框中使用cropper

雖然在模態框中可以像上面一樣使用cropper，甚至我以前寫的項目也是跟上面一樣，但是這次整理的時候突然發現了一個bug：當隱藏模態框后調整瀏覽器大小（甚至按f12），再打開模態框后cropper的容器會改變，導致難以使用。于是，我在GitHub中翻找了issue，在官方的example中找到了對應的解決方法。但其實這個解決方法也是一種暴力解法，即模態框隱藏后銷毀cropper，打開后重新創建cropper，可能會有別的方法，因為不確定會不會有別的bug，所以暫時還是用官方的方法比較好。

代碼如下：

<!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 type="text/css">body{text-align: center;}#user-photo {width:300px;height:300px;margin-top: 10px;}#photo {max-width:100%;max-height:350px;}.img-preview-box {text-align: center;}.img-preview-box > div {display: inline-block;;margin-right: 10px;}.img-preview {overflow: hidden;}.img-preview-box .img-preview-lg {width: 150px;height: 150px;}.img-preview-box .img-preview-md {width: 100px;height: 100px;}.img-preview-box .img-preview-sm {width: 50px;height: 50px;border-radius: 50%;} </style> </head> <body> <button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打開</button><br/> <div class="user-photo-box"><img id="user-photo" src=""> </div> </div> <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title text-primary"><i class="fa fa-pencil"></i>更換頭像</h4></div><div class="modal-body"><p class="tip-info text-center">未選擇圖片</p><div class="img-container hidden"><img src="" alt="" id="photo"></div><div class="img-preview-box hidden"><hr><span>150*150:</span><div class="img-preview img-preview-lg"></div><span>100*100:</span><div class="img-preview img-preview-md"></div><span>30*30:</span><div class="img-preview img-preview-sm"></div></div></div><div class="modal-footer"><label class="btn btn-danger pull-left" for="photoInput"><input type="file" class="sr-only" id="photoInput" accept="image/*"><span>打開圖片</span></label><button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button><button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button></div></div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript">var initCropperInModal = function(img, input, modal){var $image = img;var $inputImage = input;var $modal = modal;var options = {aspectRatio: 1, // 縱橫比viewMode: 2,preview: '.img-preview' // 預覽圖的class名};// 模態框隱藏后需要保存的數據對象var saveData = {};var URL = window.URL || window.webkitURL;var blobURL;$modal.on('show.bs.modal',function () {// 如果打開模態框時沒有選擇文件就點擊“打開圖片”按鈕if(!$inputImage.val()){$inputImage.click();}}).on('shown.bs.modal', function () {// 重新創建$image.cropper( $.extend(options, {ready: function () {// 當剪切界面就緒后，恢復數據if(saveData.canvasData){$image.cropper('setCanvasData', saveData.canvasData);$image.cropper('setCropBoxData', saveData.cropBoxData);}}}));}).on('hidden.bs.modal', function () {// 保存相關數據saveData.cropBoxData = $image.cropper('getCropBoxData');saveData.canvasData = $image.cropper('getCanvasData');// 銷毀并將圖片保存在img標簽$image.cropper('destroy').attr('src',blobURL);});if (URL) {$inputImage.change(function() {var files = this.files;var file;if (!$image.data('cropper')) {return;}if (files && files.length) {file = files[0];if (/^image\/\w+$/.test(file.type)) {if(blobURL) {URL.revokeObjectURL(blobURL);}blobURL = URL.createObjectURL(file);// 重置cropper，將圖像替換$image.cropper('reset').cropper('replace', blobURL);// 選擇文件后，顯示和隱藏相關內容$('.img-container').removeClass('hidden');$('.img-preview-box').removeClass('hidden');$('#changeModal .disabled').removeAttr('disabled').removeClass('disabled');$('#changeModal .tip-info').addClass('hidden');} else {window.alert('請選擇一個圖像文件！');}}});} else {$inputImage.prop('disabled', true).addClass('disabled');}}var sendPhoto = function(){$('#photo').cropper('getCroppedCanvas',{width:300,height:300}).toBlob(function(blob){// 轉化為blob后更改src屬性，隱藏模態框$('#user-photo').attr('src',URL.createObjectURL(blob));$('#changeModal').modal('hide');});}$(function(){initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal'));}); </script> </body> </html>

使用cropper來上傳圖片到服務器

由于cropper可以得到兩種裁剪后圖片的數據（即blob和dataURL），所以對應的上傳到后臺也會有兩種方法，在這里我只寫一種使用ajax上傳base64 dataURL的，另一種方法如果有興趣，可以自己嘗試。

頁面中，將上面的sendPhoto方法改為：

后臺中，Java的主要代碼如下：（使用了jdk8的Base64,，如果是低版本請自行替換）

/*** 將Base64位編碼的圖片進行解碼，并保存到指定目錄*/public static void decodeBase64DataURLToImage(String dataURL, String path, String imgName) throws IOException {// 將dataURL開頭的非base64字符刪除String base64 = dataURL.substring(dataURL.indexOf(",") + 1);FileOutputStream write = new FileOutputStream(new File(path + imgName));byte[] decoderBytes = Base64.getDecoder().decode(base64);write.write(decoderBytes);write.close();}

小結

cropper能做到的事情還很多，這里只是簡單使用了一下，更多功能可以在有想法的再研究下。

這是針對以前項目用的cropper的一個整理，結果因為當初沒有看官方例子，途中發現了在模態框中使用的一個bug，以后會注意這方面。另外，整理這部分資料時也參考了不少的網絡資料，在這里就不一一記錄了。

最后，由于本人能力有限，若發現錯誤希望能指出，本人會及時改正，非常感謝。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的【jQuery插件分享】Cropper——一个简单方便的图片裁剪插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：磁盘阵列介绍、进程的查看管理、日志文件的
下一篇：蓝桥杯C/C++ 带分数