您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計教程 >> 移動前端 >> 瀏覽設(shè)計教程

jquery Jcrop圖像裁切插件中文api文檔

Jcrop 是一個功能強大的 jQuery 圖像裁剪插件,結(jié)合后端程序(例如:PHP)可以快速的實現(xiàn)圖片裁剪的功能。

jcrop-demo-imng

jcrop是添加圖像裁剪功能的Web應(yīng)用程序的快速簡便的方法。它將使用一個強大的跨平臺的DHTML種植引擎,忠實于熟悉的桌面圖形應(yīng)用的典型的jQuery插件輕松。

options 參數(shù)說明

名稱 默認(rèn)值 說明
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ū)捀弑取Uf明:width/height
keySupport true 支持鍵盤控制。按鍵列表:上下左右(移動)、Esc(取消)、Tab(跳出裁剪框,到下一個)
cornerHandles true 允許邊角縮放
sideHandles true 允許四邊縮放
drawBorders true 繪制邊框
dragEdges true 允許拖動邊框
fixedSupport true  
touchSupport null  
boxWidth 0 畫布寬度
boxHeight 0 畫布高度
boundary 2 邊界。說明:可以從邊界開始拖動鼠標(biāo)選擇裁剪區(qū)域
fadeTime 400 過度效果的時間
animationDelay 20 動畫延遲
swingSpeed 3 過渡速度
minSelect [0,0] 選框最小選擇尺寸。說明:若選框小于該尺寸,則自動取消選擇
maxSize [0,0] 選框最大尺寸
minSize [0,0] 選框最小尺寸
onChange function(){} 選框改變時的事件
onSelect function(){} 選框選定時的事件
onRelease function(){} 取消選框時的事件

使用方法

1、載入 CSS 文件

  1. <link rel="stylesheet" href="css/jquery.Jcrop.css" rel="external nofollow" >

2、載入 JavaScript 文件

  1. <script src="js/jquery.js"></script>
  2. <script src="js/jquery.Jcrop.js"></script>

3、給 IMG 標(biāo)簽加上 ID

  1. <img id="element_id" src="pic.jpg">

4、調(diào)用 Jcrop

  1. $("#element_id").Jcrop();

Jcorp的調(diào)用主要分為兩種方式

  1. jQuery('#cropbox').Jcrop({
  2.         onChange: showCoords,
  3.         onSelect: showCoords
  4. });
  1. var api = $.Jcrop('#cropbox',{
  2.        onChange: showPreview,
  3.        onSelect: showPreview,
  4.        aspectRatio: 1
  5.   });

這里推薦大家使用第二種方式,將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]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學(xué)習(xí)與參考,請勿用于商業(yè)用途!
本文地址:http://www.irelandcustomcontracting.com/tutorial/wd1903.html
前端優(yōu)秀輔助工具(html5+css3)
shtml頁面局部緩存的實現(xiàn)
圖趣網(wǎng)微信
建議反饋
×