摘要:在裁剪框外拖動鼠標會生成一個新的裁剪框。這個是裁剪框的縱橫比,默認是不限制的。初始化完成后是否自動顯示裁剪框自動顯示的裁剪框的大小。方法的使用格式為手動顯示裁剪框。
插件介紹
這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件,當時想實現用戶資料的頭像上傳功能,并且能夠預覽圖片,和對圖片進行簡單的裁剪、旋轉,花了不少時間才看到了這個插件,感覺功能挺全面,代碼實現起來也挺簡單,再加上用的是Bootstrap,對移動端操作也有適配,于是就用了。現在稍微有點時間就記錄一下,方便以后再用的時候查閱。另外也有對應的js版本。
官方文檔(英文)
jQuery
GitHub項目地址
官方示例
js
GitHub項目地址
兼容性兼容所有支持了Canvas的瀏覽器(IE9+),一小部分功能例外,具體請查看官方文檔。
參數 viewModeType: Number
Default: 0
Options: 0,1,2,3
這個具體每個值對應的效果我也不是很清楚,推薦在上面的官方示例里都試一試,我都是比較喜歡2。
dragModeType: String
Default: "crop"
Options:
"crop": 在裁剪框外拖動鼠標會生成一個新的裁剪框。
"move": 在裁剪框外拖動鼠標會移動原圖。
"none": 在裁剪框外拖動鼠標則什么也不做。
aspectRatioType: Number
Default: NaN
這個是裁剪框的縱橫比,默認是不限制的。例如1:1的頭像就寫1,16:9可寫成16 / 9。
dataType: Object
Default: null
The previous cropped data if you had stored, will be passed to setData method automatically.
(沒怎么用過,都是直接用setData方法)
previewType: String (jQuery selector)
Default: ""
預覽圖的位置,用jQuery選擇器表示。
responsiveType: Boolean
Default: true
在更改窗口大小后是否重新渲染cropper。
restoreType: Boolean
Default: true
在更改窗口大小后是否恢復裁剪區域。
checkCrossOriginType: Boolean
Default: true
檢查圖像是否是跨域圖像。(具體查看官方文檔)
checkOrientationType: Boolean
Default: true
(具體查看官方文檔)
modalType: Boolean
Default: true
非裁剪區域是否用黑罩遮蓋。
guidesType: Boolean
Default: true
裁剪區域是否顯示虛線。
centerType: Boolean
Default: true
裁剪區域正中央是否顯示+號。
highlightType: Boolean
Default: true
裁剪區域是否高亮顯示。
backgroundType: Boolean
Default: true
是否顯示背景的黑白方格(類似PS里透明圖層的顯示方式)。
autoCropType: Boolean
Default: true
cropper初始化完成后是否自動顯示裁剪框
autoCropAreaType: Number
Default: 0.8 (80% of the image)
自動顯示的裁剪框的大小。因此,數字應當在0~1之間。
movableType: Boolean
Default: true
是否允許移動原圖。(如果這里填false那么盡管dragMode的值是move,在裁剪框外拖動也不會移動原圖)
rotatableType: Boolean
Default: true
是否可以旋轉原圖。
scalableType: Boolean
Default: true
是否可以對原圖進行縱橫拉伸。
例如把原圖寬度拉長為原來的2倍或者拉長為原來的-1倍(即水平翻轉)。
zoomableType: Boolean
Default: true
是否可以對原圖進行縮小放大。
zoomOnTouchType: Boolean
Default: true
是否允許在移動端上使用雙指觸摸縮放原圖。
zoomOnWheelType: Boolean
Default: true
是否允許使用鼠標滾輪縮放原圖。
wheelZoomRatioType: Number
Default: 0.1
當使用鼠標滾輪縮放時的比例。
cropBoxMovableType: Boolean
Default: true
是否允許移動裁剪框。
cropBoxResizableType: Boolean
Default: true
是否允許通過拖動裁剪框的邊框來調整裁剪框的大小。
toggleDragModeOnDblclickType: Boolean
Default: true
是否允許通過雙擊來在crop和move之間切換dragMode。
minContainerWidthType: Number
Default: 200
容器寬度最小值。
minContainerHeightType: Number
Default: 100
容器高度最小值。
minCanvasWidthType: Number
Default: 0
canvas(原圖)寬度最小值。
minCanvasHeightType: Number
Default: 0
canvas(原圖)高度最小值。
minCropBoxWidthType: Number
Default: 0
剪切框寬度最小值。
Note: This size is relative to the page, not the image.
minCropBoxHeightType: Number
Default: 0
剪切框高度最小值。
Note: This size is relative to the page, not the image.
readyType: Function
Default: null
A shortcut of the "ready" event.
cropstartType: Function
Default: null
A shortcut of the "cropstart" event.
cropmoveType: Function
Default: null
A shortcut of the "cropmove" event.
cropendType: Function
Default: null
A shortcut of the "cropend" event.
cropType: Function
Default: null
A shortcut of the "crop" event.
zoomType: 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
接下來只是實現一個簡單的功能:網頁中可以上傳圖片,然后對圖片進行裁剪,點擊確定后會顯示出裁剪后的圖片。
代碼如下:
裁剪圖片 使用cropper來上傳圖片到服務器結果:
由于cropper可以得到兩種裁剪后圖片的數據(即blob和dataURL),所以對應的上傳到后臺也會有兩種方法,在這里我只寫一種使用ajax上傳base64 dataURL的,另一種方法如果有興趣,可以自己嘗試。
頁面中,將上面的sendPhoto方法改為:
var sendPhoto = function () { // 得到PNG格式的dataURL var photo = $("#photo").cropper("getCroppedCanvas", { width: 300, height: 300 }).toDataURL("image/png"); $.ajax({ url: "上傳地址", // 要上傳的地址 type: "post", data: { "imgData": photo }, dataType: "json", success: function (data) { if (data.status == 0) { // 將上傳的頭像的地址填入,為保證不載入緩存加個隨機數 $(".user-photo").attr("src", "頭像地址?t=" + Math.random()); $("#changeModal").modal("hide"); } else { alert(data.info); } } }); }后臺中,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,以后會注意這方面。另外,整理這部分資料時也參考了不少的網絡資料,在這里就不一一記錄了。
最后,由于本人能力有限,若發現錯誤希望能指出,本人會及時改正,非常感謝。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/90285.html
相關文章
JQuery 插件圖片裁剪插件cropper.js使用,上傳
摘要:圖片裁剪,壓縮是上傳圖片一定會遇到的問題。如何獲得裁剪的圖片呢獲取裁剪后的圖片信息首先我們可以獲得裁剪框的節點然后調用圖片質量圖片質量越好圖片大小越大這樣就得到了你裁剪的圖片了可以通過,放到你想要的節點里展示。 圖片裁剪,壓縮是上傳圖片一定會遇到的問題。這里把我測試cropper.js這款jquery插件的心得分享一下,可以給新手做參考。 引入插件相關文件,你們down到本地也可以。這...
基于 Vue的圖片裁剪插件
摘要:預覽項目地址一些想法網上看了看基于的圖片裁剪的插件很少,剛剛好項目需要使用到圖片裁剪,于是便有了這個插件的誕生。 vue-crpopper 預覽項目地址 一些想法 網上看了看基于vue的圖片裁剪的插件很少,剛剛好項目需要使用到圖片裁剪,于是便有了這個插件的誕生。 實現的原理 通過canvas生成新的圖片, 可以上傳到后臺保存。 效果圖 showImg(https://segmentfa...
立志做一個最好用的移動端圖片裁剪插件
摘要:基于的圖片壓縮裁剪插件功能說明圖片壓縮,圖片裁剪,圖片壓縮,圖片裁剪,,解決了部分機型方向不對的問題,同時可以對圖片進行尺寸和質量的壓縮效果演示調試模式下或者手機打開本地運行使用本項目的文件需要引入在需要使用的頁面直接引入 vue-image-cropper 基于vue的圖片壓縮裁剪插件 1.功能說明 圖片壓縮,圖片裁剪,vue圖片壓縮,vue圖片裁剪,vue-image-croppe...
發表評論
0條評論
閱讀 3167·2021-11-22 15:25
閱讀 3838·2021-11-17 09:33
閱讀 3362·2021-11-08 13:15
閱讀 3044·2021-09-22 10:56
閱讀 535·2021-08-31 09:45
閱讀 2745·2019-08-30 13:49
閱讀 3072·2019-08-30 12:52
閱讀 1136·2019-08-29 17:05