jQuery 图片剪裁插件初探之 Jcrop
主頁：http://deepliquid.com/content/Jcrop.html
官方下載地址：http://deepliquid.com/content/Jcrop_Download.html
下載包中除了 CSS 文件夾和 js 文件夾外還提供了幾款 demo：
1. non-image.html 不包含圖像的任意 div 或 canvas 的剪裁方式：
2.styling.html
點擊按鈕改變樣式：提供了 3 種可以選擇的遮罩色、透明度和選區邊框樣式?jcrop-light ( bgcolor:#fff opacity:0.5 ) ,?jcrop-dark ( bgcolor:#000 opacity:0.4 ) , normal ( bgcolor:#000 opacity:0.6 )
3.tutorial1.html
Jcrop 的默認設置，只能圖像上畫裁剪框：
原圖的 html 部分為：
<img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" />此時在 js 中使用：
<script type="text/javascript">jQuery(function($){// How easy is this?? $('#target').Jcrop();});</script>就可以顯示默認的最簡單的 demo 的效果。
?
4. tutorial2.html
基本事件處理事件：?使用 Jcrop 的 onchange?事件，實時更新顯示左上、右下坐標值和選區寬高值，可以把這些值傳遞給后端程序進行處理
5.tutorial3.html
使用 Jcrop 的 onchange?事件，固定選區長寬比例并顯示預覽圖，可以使用這種方法創建縮略圖或者生成頭像
預覽圖的顯示機制和?imgAreaSelect 類似，見 line：42
function updatePreview(c){if (parseInt(c.w) > 0){var rx = xsize / c.w;var ry = ysize / c.h;$pimg.css({width: Math.round(rx * boundx) + 'px',height: Math.round(ry * boundy) + 'px',marginLeft: '-' + Math.round(rx * c.x) + 'px',marginTop: '-' + Math.round(ry * c.y) + 'px'});}};參數 c 是選區，c.w 代表選區的寬，c.h 代表選區的高；xsize 和 ysize 分別是預覽窗口的寬和高；縮放比為 rx 與 ry 分別等于預覽窗口的寬和高除以選區的寬和高；boundx 是原圖的寬，boundy 是原圖的高，見 jquery_Jcrop.js line:328:
var boundx = $img.width(),boundy = $img.height(),最后呈現在預覽窗口中預覽圖的寬度等于縮放比乘以原圖的寬高，這個處理和??imgAreaSelect 插件時一致的。
?
如果要改變選區的寬高比，只需在 demo html 中改變 line：91?#preview-pane .preview-container 的寬度和高度即改變預覽窗口的寬度和高度，同時選區的寬高比也隨著預覽窗口的改變發生改變并和預覽窗口寬高比一致。
圖示預覽圖的寬度和高度為：
#preview-pane .preview-container {width: 250px;height: 170px;overflow: hidden; }修改為：
#preview-pane .preview-container {width: 220px;height: 220px;overflow: hidden; }如果需要不限制預覽窗口的尺寸，預覽圖不發生縮放，和選區尺寸保持一致 ( 這種情況比較少 )，可以在 demo：tutorial1.html 中增加預覽窗口的代碼:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>Hello World | Jcrop Demo</title> 5 <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 6 7 <script src="../js/jquery.min.js"></script> 8 <script src="../js/jquery.Jcrop.js"></script> 9 <script type="text/javascript"> 10 11 jQuery(function($){ 12 13 // How easy is this?? 14 $('#target').Jcrop({ 15 16 onChange:showCoords, 17 onSelect:showCoords 18 }); 19 }); 20 21 function showCoords(c){ 22 23 $('#preview-pane').css({"backgroundPosition":"-"+c.x+"px -"+c.y+"px","width":c.w,"height":c.h}); 24 }; 25 26 </script> 27 <link rel="stylesheet" href="demo_files/main.css" type="text/css" /> 28 <link rel="stylesheet" href="demo_files/demos.css" type="text/css" /> 29 <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" /> 30 <style> 31 #preview-pane{background:url(demo_files/sago.jpg)} 32 </style> 33 </head> 34 <body> 35 36 <img src="demo_files/sago.jpg" id="target" alt="[Jcrop Example]" /> 37 <div id="preview-pane"></div> 38 39 </body> 40 </html> View Code如圖：
6.tutorial4.html
使用 animateTo API 進行各種動畫和過渡的選區變換、背景透明度和背景顏色的過渡轉變，很炫
顏色過渡需要?jQuery Color Animations?插件的支持，否則顏色不會有過渡效果。
這個演示還需要使用 outerImage 選項定義另外的圖像。
use experimental shader ：?使用實現性的遮罩
7.tutorial5.html API Demo
翻譯過來的界面( 來自：http://code.ciaoca.com/jquery/jcrop/demo/api.html )：
?
demo 文件夾中還提供了?crop.php，把選取的圖片真正剪裁出來。
?
更多內容：官方文檔
中文文檔
轉載于:https://www.cnblogs.com/dee0912/p/4053876.html
總結
以上是生活随笔為你收集整理的jQuery 图片剪裁插件初探之 Jcrop的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 4.3、Libgdx启动类和配置
- 下一篇： tomcat的JK和JK2