頭像裁剪組件jcrop基本用法
Jcrop是一個jQuery插件，它能為你的WEB應用程序快速簡單地提供圖片裁剪的功能。
特點：
- 對所有圖片均unobtrusively（無侵入的，保持DOM簡潔）
- 支持寬高比例鎖定
- 支持 minSize / maxSize設置
- 支持改變選區或移 動選區時的回調（Callback）
- 支持用鍵盤微調選 區
- 通過API創建互 動，比如動畫效果
- 支持CSS樣式 </ul>
jcrop原始下載頁面：猛擊此處
基本使用方法如下：
一、在head部分(<head>和</head>之間)插入相關css和js文件。
<link rel="stylesheet" href="css/jquery.Jcrop.css"> <script src="js/jquery.js"></script> <script src="js/jquery.Jcrop.js"></script>
二、在head部分插入回調函數等相關處理參數。
<script language="Javascript">
<!--
jQuery(function($){
// Create variables (in this scope) to hold the API and image size
var jcrop_api, boundx, boundy;
$('#cropbox').Jcrop({
minSize: [0,0],
maxSize:[0,0],
setSelect: [0,0,0,0],
boxWidth:800,
borderOpacity:0.3,
keySupport:false,
dragEdges:false,
allowSelect:false,
allowResize:false,
bgOpacity:0.2,
boundary:0,
//allowMove:false,
addClass: 'jcrop-handle',
onSelect: updateCoords,
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('請選擇裁剪區域');
return false;
};
});
-->
</script>三、給相關圖片加上id以便識別。
<img id="cropbox" src="x.jpg">
這樣就能實現最簡單的裁剪效果，至于如何結合動態語句處理圖片，在置頂的文章里已經給出了示例。
下表給出基本options參數設置：
| 名稱 | 默認值 | 說明 |
|---|---|---|
| allowSelect | true | 允許新選框 |
| allowMove | true | 允許選框移動 |
| allowResize | true | 允許選框縮放 |
| trackDocument | true | |
| baseClass | "jcrop" | 基礎樣式名前綴。說明：class="jcrop-holder"，更改的只是其中的 jcrop。 |
| addClass | null | 添加樣式會。例：假設值為 "test"，那么會添加樣式到 class="test jcrop-holder" |
| bgColor | "black" | 背景顏色。顏色關鍵字、HEX、RGB 均可。 |
| bgOpacity | 0.6 | 背景透明度 |
| bgFade | false | 使用背景過渡效果 |
| borderOpacity | 0.4 | 選框邊框透明度 |
| handleOpacity | 0.5 | 縮放按鈕透明度 |
| handleSize | 9 | 縮放按鈕大小 |
| handleOffset | 5 | 縮放按鈕與邊框的距離 |
| aspectRatio | 0 | 選框寬高比。說明：width/height |
| keySupport | true | 支持鍵盤控制。按鍵列表：上下左右（移動）、Esc（取消）、Tab（跳出裁剪框，到下一個） |
| cornerHandles | true | 允許邊角縮放 |
| sideHandles | true | 允許四邊縮放 |
| drawBorders | true | 繪制邊框 |
| dragEdges | true | 允許拖動邊框 |
| fixedSupport | true | |
| touchSupport | null | |
| boxWidth | 0 | 畫布寬度 |
| boxHeight | 0 | 畫布高度 |
| boundary | 2 | 邊界。說明：可以從邊界開始拖動鼠標選擇裁剪區域 |
| fadeTime | 400 | 過度效果的時間 |
| animationDelay | 20 | 動畫延遲 |
| swingSpeed | 3 | 過渡速度 |
| minSelect | [0,0] | 選框最小選擇尺寸。說明：若選框小于該尺寸，則自動取消選擇 |
| maxSize | [0,0] | 選框最大尺寸 |
| minSize | [0,0] | 選框最小尺寸 |
| onChange | function(){} | 選框改變時的事件 |
| onSelect | function(){} | 選框選定時的事件 |
| onRelease | function(){} | 取消選框時的事件 |
下表是api方法
| 名稱 | 說明 |
|---|---|
| setImage(string) | 設定（或改變）圖像。例：jcrop_api.setImage("newpic.jpg") |
| setOptions(object) | 設定（或改變）參數，格式與初始化設置參數一樣 |
| setSelect(array) | 創建選框，參數格式為：[x,y,x2,y2] |
| animateTo(array) | 用動畫效果創建選框，參數格式為：[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] |
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！