Jcrop 是一個功能強大的 jQuery 圖像裁剪插件，結合後端程式（例如：PHP）可以快速的實現圖片裁剪的功能。 版本： jQuery v1.5.1+ jQuery Jcrop v0.9.12 github 線上實例 實例預覽 jQuery Jcrop 圖像裁剪插件 Hello World 基礎 ...
Jcrop 是一個功能強大的 jQuery 圖像裁剪插件，結合後端程式（例如：PHP）可以快速的實現圖片裁剪的功能。
- 版本：
- jQuery v1.5.1+
-
jQuery Jcrop v0.9.12
線上實例
實例預覽 jQuery Jcrop 圖像裁剪插件 Hello World 基礎示例
實例預覽 jQuery Jcrop 圖像裁剪插件 Basic Handler 事件處理
實例預覽 jQuery Jcrop 圖像裁剪插件按高寬比例預覽裁剪效果
實例預覽 jQuery Jcrop 圖像裁剪插件 Animation / Transitions 動畫/過度效果
實例預覽 jQuery Jcrop 圖像裁剪插件 API 示例
實例預覽 jQuery Jcrop 圖像裁剪插件 CSS 樣式
實例預覽 Jcrop 圖像裁剪插件 Non-image Cropping 非圖片裁剪
一個服務端PHP程式裁剪的示例
- <?php
- //服務端crop.php代碼
- if ($_SERVER['REQUEST_METHOD'] == 'POST')
- {
- $targ_w = $targ_h = 150;
- $jpeg_quality = 90;
- $r_path=str_replace(array('\\', '\\\\'), '/', dirname(__FILE__));
- $src = $r_path.'/img/pool.jpg';//原圖片路徑
- $img_r = imagecreatefromjpeg($src);
- $dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
- imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
- $targ_w,$targ_h,$_POST['w'],$_POST['h']);
- header('Content-type: image/jpeg');
- $save_img_path=null;//截圖後保存的路徑
- imagejpeg($dst_r,$save_img_path,$jpeg_quality);
- exit;
- }
- ?>
實例預覽 jQuery Jcrop 使用PHP圖像裁剪實例
使用方法
載入 CSS 文件
- <link rel="stylesheet" href="jquery.Jcrop.css">
載入 JavaScript 文件
<script src="jquery.js"></script>
<script src="jquery.Jcrop.js"></script>
給 IMG 標簽加上 ID
- <img id="element_id" src="pic.jpg">
調用 Jcrop
- $('#element_id').Jcrop();
參數說明
| 名稱 | 預設值 | 說明 |
|---|---|---|
| allowSelect | true | 允許新選框 |
| allowMove | true | 允許選框移動 |
| allowResize | true | 允許選框縮放 |
| trackDocument | true | 拖動選框時，允許超出圖像以外的地方時繼續拖動。 |
| baseClass | 'jcrop' | 基礎樣式名首碼。說明：class="jcrop-holder"，更改的只是其中的 jcrop。
例：假設值為 "test"，那麼樣式名會更改為 "test-holder" |
| addClass | null | 添加樣式。
例：假設值為 "test"，那麼會添加樣式到 |
| bgColor | 'black' | 背景顏色。顏色關鍵字、HEX、RGB 均可。 |
| bgOpacity | 0.6 | 背景透明度 |
| bgFade | false | 使用背景過渡效果 |
| borderOpacity | 0.4 | 選框邊框透明度 |
| handleOpacity | 0.5 | 縮放按鈕透明度 |
| handleSize | 9 | 縮放按鈕大小 |
| aspectRatio | 0 | 選框寬高比。說明：width/height |
| keySupport | true | 支持鍵盤控制。按鍵列表：上下左右（移動選框）、Esc（取消選框） |
| createHandles | ['n','s','e','w','nw','ne','se','sw'] | 設置邊角控制器 |
| createDragbars | ['n','s','e','w'] | 設置邊框控制器 |
| createBorders | ['n','s','e','w'] | 設置邊框 |
| drawBorders | true | 繪製邊框 |
| dragEdges | true | 允許拖動邊框 |
| fixedSupport | true | 支持 fixed，例如：IE6、iOS4 |
| touchSupport | null | 支持觸摸事件 |
| shade | 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(){} | 選框選定時的事件 |
| onDblClick | 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] |
下載
