html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper
插件描述：相信很多朋友都在大型的網站，如新浪微博、QQ微博上看到過頭像裁圖工具，感覺很高大尚吧，今天朋友們有福了，今天就來說一說一款這么高大尚的插件cropper，cropper是一款使用簡單且功能強大的圖片剪裁jQuery插件。該圖片剪裁插件支持圖片放大縮小，支持鼠標滾輪操作，支持圖片旋轉，支持觸摸屏設備，支持canvas，并且支持跨瀏覽器使用。
jquery實例教程：圖片剪裁插件Image Cropper使用方法
引入必要的js和css核心文件
構建html，可以將圖片或canvas直接包裹到一個塊級元素中
??
初始化插件，可以使用$.fn.cropper方法來初始化該圖片剪裁插件。$('.container?>?img').cropper({
aspectRatio:?16?/?9,
crop:?function(data)?{
//?出來裁切后的圖片數(shù)據.
}
});
注意事項：
注意：剪裁區(qū)域的尺寸繼承自圖片的父容器(包裹容器)，所以要確保包裹圖片的是一個可見的塊級元
輸出的剪裁數(shù)據基于原始的圖片尺寸，你可以使用這些數(shù)據直接剪裁圖片。
如果你要使用跨源圖片來作為剪裁圖片，請確保你的瀏覽器支持HTML5 CORS settings attributes，并且你的圖片服務器支持Access-Control-Allow-Origin屬性。
參數(shù)你可以通過$().cropper(options)方法來設置參數(shù)。如果你想改變全局默認參數(shù)，可以使用$.fn.cropper.setDefaults(options)方法。
aspectRatio：類型：Number，默認值NaN。設置剪裁容器的比例。
crop：類型：Function，默認值null。當改變剪裁容器或圖片時的事件函數(shù)。
preview：類型：String(jQuery選擇器)，默認值''。添加額外的元素(容器)的預覽。注意：
最大寬度是剪裁容器的初始化寬度
最大高度是剪裁容器的初始化高度
如果你設置了aspectRatio參數(shù)，確保預覽容器具有相同的比例
strict：類型：Boolean，默認值true。在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
responsive：類型：Boolean，默認值true。是否在窗口尺寸改變的時候重置cropper。
checkImageOrigin：類型：Boolean，默認值true。默認情況下，插件會檢測圖片的源，如果是跨域圖片，圖片元素會被添加crossOrigin class，并會為圖片的url添加一個時間戳來使getCroppedCanvas變?yōu)榭捎谩Ｌ砑訒r間戳會使圖片重新加載，以使跨域圖片能夠使用getCroppedCanvas。在圖片上添加crossOrigin class會阻止在圖片url上添加時間戳，及圖片的重新加載。
background：類型：Boolean，默認值true。是否在容器上顯示網格背景。
modal：類型：Boolean，默認值true。是否在剪裁框上顯示黑色的模態(tài)窗口。
guides：類型：Boolean，默認值true。是否在剪裁框上顯示虛線。
highlight：類型：Boolean，默認值true。是否在剪裁框上顯示白色的模態(tài)窗口。
autoCrop：類型：Boolean，默認值true。是否在初始化時允許自動剪裁圖片。
autoCropArea：類型：Number，默認值0.8(圖片的80%)。0-1之間的數(shù)值，定義自動剪裁區(qū)域的大小。
dragCrop：類型：Boolean，默認值true。是否允許移除當前的剪裁框，并通過拖動來新建一個剪裁框區(qū)域。
movable：類型：Boolean，默認值true。是否允許移動剪裁框。
resizable：類型：Boolean，默認值true。是否允許改變剪裁框的大小。
zoomable：類型：Boolean，默認值true。是否允許放大縮小圖片。
mouseWheelZoom：類型：Boolean，默認值true。是否允許通過鼠標滾輪來縮放圖片。
touchDragZoom：類型：Boolean，默認值true。是否允許通過觸摸移動來縮放圖片。
rotatable：類型：Boolean，默認值true。是否允許旋轉圖片。
minContainerWidth：類型：Number，默認值200。容器的最小寬度。
minContainerHeight：類型：Number，默認值100。容器的最小高度。
minCanvasWidth：類型：Number，默認值0。canvas 的最小寬度(image wrapper)。
minCanvasHeight：類型：Number，默認值0。canvas 的最小高度(image wrapper)。
build：類型：Function，默認值null。build.cropper事件的簡寫方式。
built：類型：Function，默認值null。built.cropper事件的簡寫方式。
dragstart：類型：Function，默認值null。dragstart.cropper事件的簡寫方式。
dragmove：類型：Function，默認值null。dragmove.cropper事件的簡寫方式。
dragend：類型：Function，默認值null。dragend.cropper事件的簡寫方式。
zoomin：類型：Function，默認值null。zoomin.cropper事件的簡寫方式。
zoomout：類型：Function，默認值null。zoomout.cropper事件的簡寫方式。
方法
因為圖片是異步加載的，所以你需要在built之后才能調用下面的方法，setAspectRatio、replace和destroy方法例外。$().cropper({
built:?function?()?{
$().cropper('method',?argument1,?,?argument2,?...,?argumentN)
}
}
move(offsetX, offsetY)：offsetX：類型：Number，水平方向上移動的大小，單位像素。
offsetY：類型：Number，垂直方向上移動的大小，單位像素。
移動一幅圖片：$().cropper('move',?1,?0)
$().cropper('move',?0,?-1)
zoom(ratio)：
ratio：
類型：NumberZoom in：需要一個正數(shù)(ratio > 0)
Zoom out：需要一個負數(shù)(ratio < 0)
縮放一幅圖片：$().cropper('zoom',?0.1)
$().cropper('zoom',?-0.1)
rotate(degree)：
ratio：
類型：NumberRotate right：需要一個正數(shù)(degree > 0)
Rotate left：需要一個負數(shù)(degree < 0)
旋轉一幅圖片，需要CSS3 Transforms3d的支持(IE10+)：$().cropper('rotate',?90)
$().cropper('rotate',?-90
enable()：使cropper可用。
disable()：凍結cropper。
reset()：重置剪裁區(qū)域的圖片到初始狀態(tài)。
clear()：清空剪裁區(qū)域。
replace(url)：url：
替換圖片的URL重建cropper。
類型：String
一個新的圖片URL
getData()：返回值：
類型：Object
屬性：
x：剪裁區(qū)域左側的偏移。
y：剪裁區(qū)域距上部的偏移。
width：剪裁區(qū)域的寬度。
height：剪裁區(qū)域的高度。
rotate：圖片的旋轉角度。
請參考實例效果
getContainerData()：返回值：
類型：Object
屬性：
width：容器的當前寬度。
height：容器的當前高度。
輸出容器尺寸數(shù)據。
getImageData()：
返回值：
類型：Object屬性：
left：圖片的左側偏移。
top：圖片的上部偏移。
width：圖片的寬度。
height：圖片的高度。
輸出圖片的位置和尺寸大小。
getCanvasData()：返回值：
類型：Object
屬性：
left：canvas的左側偏移。
top：canvas的上部偏移。
width：canvas的寬度。
height：canvas的高度。
輸出canvas(圖片容器)的位置和尺寸大小。
setCanvasData(data)：返回值：
類型：Object
屬性：
left：canvas的距離左側新的偏移。
top：canvas的距離上部新的偏移。
width：canvas新的寬度。
height：canvas新的高度。
改變canvas(圖片容器)的位置和尺寸大小。
getCropBoxData()：返回值：
類型：Object
屬性：
left：剪裁區(qū)域距離左側的偏移。
top：剪裁區(qū)域距離上部的偏移。
width：剪裁區(qū)域的寬度。
height：剪裁區(qū)域的高度。
輸出剪裁區(qū)域的位置和尺寸大小。
setCropBoxData(data)：返回值：
類型：Object
屬性：
left：剪裁區(qū)域距離左側新的偏移。
top：剪裁區(qū)域距離上部新的偏移。
width：剪裁區(qū)域新的寬度。
height：剪裁區(qū)域新的高度。
改變剪裁區(qū)域的位置和尺寸大小。
getCroppedCanvas([options])：參數(shù)(默認值)：
類型：Object
屬性：
width：輸出的canvas目標寬度。
height：輸出的canvas目標高度。
fillColor：canvas中填充的顏色。
返回值：
類型：HTMLCanvasElement
一個畫有剪裁圖片的canvas。
瀏覽器支持：基本圖像：需要Canvas的支持(IE9+)
旋轉圖像：需要CSS3 animations Transforms3d的支持(IE10+)
跨域圖像：需要HTML5 CORS settings attributes的支持(IE11+)
獲取canvas繪制的剪裁圖像。
在這之后，你可以直接將canvas作為圖片顯示，或使用canvas.toDataURL方法獲取圖像的數(shù)據鏈接，或者使用canvas.toBlob方法獲取一個blob，并通過FormData方法將它更新到服務器上(如果瀏覽器支持這些API)。$().cropper('getCroppedCanvas')
$().cropper('getCroppedCanvas',?{
width:?160,
height:?90
});
setAspectRatio(aspectRatio)：aspectRatio：
類型：Number
需要一個正整數(shù)。
改變剪裁區(qū)域的比例。
setDragMode([mode])：
mode(可選項)：
類型：String
默認值：''
選項：'crop'或'move'
改變拖拽模式。提示：你可以通過雙擊來改變"crop" 和 "move"模式。
事件build.cropper：當cropper對象開始加載圖片的時候觸發(fā)該事件。
built.cropper：當cropper對象構建完成時觸發(fā)該事件。
dragstart.cropper：
event.dragType：
"crop"：創(chuàng)建一個新的剪裁區(qū)域。
"move"：移動canvas。
"zoom"：通過觸摸移動來縮放canvas。
"e"：調整剪裁區(qū)域東邊的尺寸大小。
"w"：調整剪裁區(qū)域西邊的尺寸大小。
"s"：調整剪裁區(qū)域南邊的尺寸大小。
"n"：調整剪裁區(qū)域北邊的尺寸大小。
"se"：調整剪裁區(qū)域東南邊的尺寸大小。
"sw"：調整剪裁區(qū)域西南邊的尺寸大小。
"ne"：調整剪裁區(qū)域東北邊的尺寸大小。
"nw"：調整剪裁區(qū)域西北邊的尺寸大小。
"all"：移動剪裁區(qū)域。
該事件在剪裁區(qū)域發(fā)生改變時觸發(fā)。
相關的原始事件：mousedown、touchstart。$('img').on('dragstart.cropper',?function?(e)?{
console.log(e.type);?//?dragstart
console.log(e.namespace);?//?cropper
console.log(e.dragType);?//?...
});
dragmove.cropper：event.dragType：和dragstart.cropper相同。
當剪裁區(qū)域發(fā)生改變時觸發(fā)。
相關的原始事件：mousemove、touchmove。
dragend.cropper：event.dragType：和dragstart.cropper相同。
當剪裁區(qū)域改變結束時觸發(fā)。
相關的原始事件：mouseup、mouseleave、touchend、touchleave和touchcancel。
zoomin.cropper：當cropper對象開始放大canvas時觸發(fā)。
zoomout.cropper：當cropper對象開始縮小canvas時觸發(fā)。
No conflict：如果你使用了相同名稱空間的其它插件，可以通過$.fn.cropper.noConflict方法來修改名稱空間。
$.fn.cropper.noConflict();
//?Code?that?uses?other?plugin's?"$().cropper"?can?follow?here.
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的html中剪切图片所用插件,简单功能强大的jQuery图片剪裁插件Image Cropper的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html加载出来图片乱掉,HTML基础
- 下一篇： 车位预定查询html格式,停车场车位预定