jquery Jcrop圖像裁切插件中文api文檔
2014/2/24 10:09:44來源:uedsc.com
Jcrop 是一個功能強大的 jQuery 圖像裁剪插件,結(jié)合后端程序(例如:PHP)可以快速的實現(xiàn)圖片裁剪的功能。
jcrop是添加圖像裁剪功能的Web應(yīng)用程序的快速簡便的方法。它將使用一個強大的跨平臺的DHTML種植引擎,忠實于熟悉的桌面圖形應(yīng)用的典型的jQuery插件輕松。
options 參數(shù)說明
名稱 | 默認值 | 說明 |
---|---|---|
allowSelect | true | 允許新選框 |
allowMove | true | 允許選框移動 |
allowResize | true | 允許選框縮放 |
trackDocument | true | |
baseClass | “jcrop” | 基礎(chǔ)樣式名前綴。說明:class=”jcrop-holder”,更改的只是其中的 jcrop。 |
addClass | null | 添加樣式。例:假設(shè)值為 “test”,那么會添加樣式到 |
bgColor | “black” | 背景顏色。顏色關(guān)鍵字、HEX、RGB 均可。 |
bgOpacity | 0.6 | 背景透明度 |
bgFade | false | 使用背景過渡效果 |
borderOpacity | 0.4 | 選框邊框透明度 |
handleOpacity | 0.5 | 縮放按鈕透明度 |
handleSize | 9 | 縮放按鈕大小 |
handleOffset | 5 | 縮放按鈕與邊框的距離 |
aspectRatio | 0 | 選框?qū)捀弑?。說明:width/height |
keySupport | true | 支持鍵盤控制。按鍵列表:上下左右(移動)、Esc(取消)、Tab(跳出裁剪框,到下一個) |
cornerHandles | true | 允許邊角縮放 |
sideHandles | true | 允許四邊縮放 |
drawBorders | true | 繪制邊框 |
dragEdges | true | 允許拖動邊框 |
fixedSupport | true | |
touchSupport | null | |
boxWidth | 0 | 畫布寬度 |
boxHeight | 0 | 畫布高度 |
boundary | 2 | 邊界。說明:可以從邊界開始拖動鼠標選擇裁剪區(qū)域 |
fadeTime | 400 | 過度效果的時間 |
animationDelay | 20 | 動畫延遲 |
swingSpeed | 3 | 過渡速度 |
minSelect | [0,0] | 選框最小選擇尺寸。說明:若選框小于該尺寸,則自動取消選擇 |
maxSize | [0,0] | 選框最大尺寸 |
minSize | [0,0] | 選框最小尺寸 |
onChange | function(){} | 選框改變時的事件 |
onSelect | function(){} | 選框選定時的事件 |
onRelease | function(){} | 取消選框時的事件 |
使用方法
1、載入 CSS 文件
- <link rel="stylesheet" href="css/jquery.Jcrop.css" rel="external nofollow" >
2、載入 JavaScript 文件
- <script src="js/jquery.js"></script>
- <script src="js/jquery.Jcrop.js"></script>
3、給 IMG 標簽加上 ID
- <img id="element_id" src="pic.jpg">
4、調(diào)用 Jcrop
- $("#element_id").Jcrop();
Jcorp的調(diào)用主要分為兩種方式
- jQuery('#cropbox').Jcrop({
- onChange: showCoords,
- onSelect: showCoords
- });
- var api = $.Jcrop('#cropbox',{
- onChange: showPreview,
- onSelect: showPreview,
- aspectRatio: 1
- });
這里推薦大家使用第二種方式,將Jcrop生成的對象賦給一個全局變量,這樣操作起來更靈活,如調(diào)用api.destroy();方法可以銷毀 Jcorp,這樣我們在實際使用中會更靈活一些,因為直接改變要裁剪圖片的路徑會導(dǎo)致Jcorp的出錯,如果想要變更編輯的圖片我們需要銷毀Jcorp, 變更圖片的屬性后再次為圖片附加Jcorp。
API 接口
名稱 | 說明 |
---|---|
setImage(string) | 設(shè)定(或改變)圖像。例:jcrop_api.setImage(“newpic.jpg”) |
setOptions(object) | 設(shè)定(或改變)參數(shù),格式與初始化設(shè)置參數(shù)一樣 |
setSelect(array) | 創(chuàng)建選框,參數(shù)格式為:[x,y,x2,y2] |
animateTo(array) | 用動畫效果創(chuàng)建選框,參數(shù)格式為:[x,y,x2,y2] |
release() | 取消選框 |
disable() | 禁用 Jcrop。說明:已有選框不會被清除。 |
enable() | 啟用 Jcrop |
destroy() | 移除 Jcrop |
tellSelect() | 獲取選框的值(實際尺寸)。例子:console.log(jcrop_api.tellSelect()) |
tellScaled() | 獲取選框的值(界面尺寸)。例子:console.log(jcrop_api.tellScaled()) |
getBounds() | 獲取圖片實際尺寸,格式為:[w,h] |
getWidgetSize() | 獲取圖片顯示尺寸,格式為:[w,h] |
getScaleFactor() | 獲取圖片縮放的比例,格式為:[w,h] |
項目地址:http://deepliquid.com/content/Jcrop.html
下載信息 [文件大小:195.54 KB 下載次數(shù): 次] |
點擊下載文件:Jcrop |
[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.pkvc.cn/tutorial/wd1903.html
本文地址:http://m.pkvc.cn/tutorial/wd1903.html
這些是最新的
最熱門的教程