jquery Jcrop圖像裁切插件中文api文檔
2014/2/24 10:09:44來(lái)源:uedsc.com
Jcrop 是一個(gè)功能強(qiáng)大的 jQuery 圖像裁剪插件,結(jié)合后端程序(例如:PHP)可以快速的實(shí)現(xiàn)圖片裁剪的功能。
jcrop是添加圖像裁剪功能的Web應(yīng)用程序的快速簡(jiǎn)便的方法。它將使用一個(gè)強(qiáng)大的跨平臺(tái)的DHTML種植引擎,忠實(shí)于熟悉的桌面圖形應(yīng)用的典型的jQuery插件輕松。
options 參數(shù)說(shuō)明
名稱 | 默認(rèn)值 | 說(shuō)明 |
---|---|---|
allowSelect | true | 允許新選框 |
allowMove | true | 允許選框移動(dòng) |
allowResize | true | 允許選框縮放 |
trackDocument | true | |
baseClass | “jcrop” | 基礎(chǔ)樣式名前綴。說(shuō)明:class=”jcrop-holder”,更改的只是其中的 jcrop。 |
addClass | null | 添加樣式。例:假設(shè)值為 “test”,那么會(huì)添加樣式到 |
bgColor | “black” | 背景顏色。顏色關(guān)鍵字、HEX、RGB 均可。 |
bgOpacity | 0.6 | 背景透明度 |
bgFade | false | 使用背景過(guò)渡效果 |
borderOpacity | 0.4 | 選框邊框透明度 |
handleOpacity | 0.5 | 縮放按鈕透明度 |
handleSize | 9 | 縮放按鈕大小 |
handleOffset | 5 | 縮放按鈕與邊框的距離 |
aspectRatio | 0 | 選框?qū)捀弑?。說(shuō)明:width/height |
keySupport | true | 支持鍵盤(pán)控制。按鍵列表:上下左右(移動(dòng))、Esc(取消)、Tab(跳出裁剪框,到下一個(gè)) |
cornerHandles | true | 允許邊角縮放 |
sideHandles | true | 允許四邊縮放 |
drawBorders | true | 繪制邊框 |
dragEdges | true | 允許拖動(dòng)邊框 |
fixedSupport | true | |
touchSupport | null | |
boxWidth | 0 | 畫(huà)布寬度 |
boxHeight | 0 | 畫(huà)布高度 |
boundary | 2 | 邊界。說(shuō)明:可以從邊界開(kāi)始拖動(dòng)鼠標(biāo)選擇裁剪區(qū)域 |
fadeTime | 400 | 過(guò)度效果的時(shí)間 |
animationDelay | 20 | 動(dòng)畫(huà)延遲 |
swingSpeed | 3 | 過(guò)渡速度 |
minSelect | [0,0] | 選框最小選擇尺寸。說(shuō)明:若選框小于該尺寸,則自動(dòng)取消選擇 |
maxSize | [0,0] | 選框最大尺寸 |
minSize | [0,0] | 選框最小尺寸 |
onChange | function(){} | 選框改變時(shí)的事件 |
onSelect | function(){} | 選框選定時(shí)的事件 |
onRelease | function(){} | 取消選框時(shí)的事件 |
使用方法
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 標(biāo)簽加上 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生成的對(duì)象賦給一個(gè)全局變量,這樣操作起來(lái)更靈活,如調(diào)用api.destroy();方法可以銷毀 Jcorp,這樣我們?cè)趯?shí)際使用中會(huì)更靈活一些,因?yàn)橹苯痈淖円眉魣D片的路徑會(huì)導(dǎo)致Jcorp的出錯(cuò),如果想要變更編輯的圖片我們需要銷毀Jcorp, 變更圖片的屬性后再次為圖片附加Jcorp。
API 接口
名稱 | 說(shuō)明 |
---|---|
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) | 用動(dòng)畫(huà)效果創(chuàng)建選框,參數(shù)格式為:[x,y,x2,y2] |
release() | 取消選框 |
disable() | 禁用 Jcrop。說(shuō)明:已有選框不會(huì)被清除。 |
enable() | 啟用 Jcrop |
destroy() | 移除 Jcrop |
tellSelect() | 獲取選框的值(實(shí)際尺寸)。例子:console.log(jcrop_api.tellSelect()) |
tellScaled() | 獲取選框的值(界面尺寸)。例子:console.log(jcrop_api.tellScaled()) |
getBounds() | 獲取圖片實(shí)際尺寸,格式為:[w,h] |
getWidgetSize() | 獲取圖片顯示尺寸,格式為:[w,h] |
getScaleFactor() | 獲取圖片縮放的比例,格式為:[w,h] |
項(xiàng)目地址:http://deepliquid.com/content/Jcrop.html
下載信息 [文件大?。?95.54 KB 下載次數(shù): 次] |
![]() |
[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://www.pkvc.cn/tutorial/wd1903.html
本文地址:http://www.pkvc.cn/tutorial/wd1903.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
這些是最新的
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏
最熱門(mén)的教程