快捷導航

JQuery Jcrop 實現(xiàn)圖片裁剪的插件

更新時間：2009年05月26日 01:50:21 作者：

非常不錯的模擬圖片裁剪效果的實現(xiàn)代碼，文件都是腳本之家本地的，大家可以直接另存為就可以了。

效果如下圖

請“運行代碼”先試下運行，運行后請刷新一次，感受下：

<html>     <head>                   <style type="text/css">         body{             margin:100px auto;             text-align:center;         }         .jcrop-holder {             text-align: left;         }         .jcrop-vline, .jcrop-hline{             font-size: 0;             position: absolute;             background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') top left repeat;         }         .jcrop-vline {             height: 100%;             width: 1px !important;         }         .jcrop-hline {             width: 100%;             height: 1px !important;         }         .jcrop-handle {             font-size: 1px;             width: 7px !important;             height: 7px !important;             border: 1px #eee solid;             background-color: #333;             *width: 9px;             *height: 9px;         }                  .jcrop-tracker {             width: 100%;             height: 100%;         }                  .custom .jcrop-vline,.custom .jcrop-hline{             background: yellow;         }         .custom .jcrop-handle{             border-color: black;             background-color: #C7BB00;             -moz-border-radius: 3px;             -webkit-border-radius: 3px;         }         </style>              </head>     <body>             <img src="http://img.jb51.net/jslib/images/flowers.jpg" id="cropbox" /> <a href="http://www.dbjr.com.cn/">腳本之家</a>     </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

目前做的這個項目中要用到用戶頭像功能，領(lǐng)導說最好是做成用戶上傳一個圖片后可以用圖像裁剪的方法自己選擇頭像。同事推薦了Jcrop這個插件，到它的官方站點http://deepliquid.com/content/Jcrop.html 如果網(wǎng)速太慢，請直接點擊這里下載。下載了最新版的壓縮包，壓縮包中包括了Jcrop的幾個demo文件，關(guān)鍵的Jcrop.js文件和jQuery.Jcrop.css文件。基本上來說參照它的幾個demo文件就可以學會使用這個插件了。晚上正好學習研究了下，現(xiàn)簡單總結(jié)如下，也方便下英文不好的朋友們。
使用插件必須條件：引入jQuery.js文件，引入jQuery.Jcrop.js文件，引入JQuery.Jcrop.css文件。
1.最基本使用方法
html代碼部分：

復(fù)制代碼代碼如下:

js部分：

復(fù)制代碼代碼如下:

$( 
function() 
{ 
$("#demoImage").Jcrop(); 
} 
); 

這樣就可以在圖片上進行裁剪了。
2.得到選中區(qū)域的坐標以及回調(diào)函數(shù)
html代碼部分如下：

復(fù)制代碼代碼如下:

<img src="demo_files/flowers.jpg" id="demoImage" /> 
<label>x1</label><input type="text" id="txtX1" /> 
<label>y1</label><input type="text" id="txtY1" /> 
<label>x2</label><input type="text" id="txtX2" /> 
<label>y2</label><input type="text" id="txtY2" /> 
<label>width</label><input type="text" id="txtWidth" /> 
<label>height</label><input type="text" id="txtHeight" /> 

js代碼部分如下：

復(fù)制代碼代碼如下:

$(function(){ 
//事件處理 
$("#demoImage").Jcrop({ 
onChange:showCoords, //當選擇區(qū)域變化的時候，執(zhí)行對應(yīng)的回調(diào)函數(shù) 
onSelect:showCoords //當選中區(qū)域的時候，執(zhí)行對應(yīng)的回調(diào)函數(shù) 
}); 
}); 
function showCoords(c) { 
$("#txtX1").val(c.x); //得到選中區(qū)域左上角橫坐標 
$("#txtY1").val(c.y); //得到選中區(qū)域左上角縱坐標 
$("#txtX2").val(c.x2); //得到選中區(qū)域右下角橫坐標 
$("#txtY2").val(c.y2); //得到選中區(qū)域右下角縱坐標 
$("#txtWidth").val(c.w); //得到選中區(qū)域的寬度 
$("#txtHeight").val(c.h); //得到選中區(qū)域的高度 
}

3.常用選項設(shè)置

復(fù)制代碼代碼如下:

aspectRatio:選中區(qū)域按寬/高比，為1表示正方形。 
minSize:最小的寬，高值。 
maxSize:最大的寬，高值。 
setSelect:設(shè)置初始選中區(qū)域。 
bgColor:背景顏色 
bgOpacity:背景透明度。 
allowResize:是否允許改變選中區(qū)域大小。 
allowMove:是否允許移動選中區(qū)域。

舉例如下：

復(fù)制代碼代碼如下:

$(function() { 
$("#demoImage").Jcrop({ 
aspectRatio: 1, //選中區(qū)域?qū)捀弑葹?，即選中區(qū)域為正方形 
bgColor:"#ccc", //裁剪時背景顏色設(shè)為灰色 
bgOpacity:0.1, //透明度設(shè)為0.1 
allowResize:false, //不允許改變選中區(qū)域的大小 
setSelect:[0,0,100,100] //初始化選中區(qū)域 
}); 
});

4.api用法

復(fù)制代碼代碼如下:

var api = $.Jcrop("#demoImage"); 
api.disable(); //設(shè)置為禁用裁剪效果 
api.enable(); //設(shè)置為啟用裁剪效果 
api.setOptions({allowResize:false});//設(shè)置相應(yīng)配置 
api.setSelect([0,0,100,100]); //設(shè)置選中區(qū)域 

下載地址:http://www.dbjr.com.cn/jiaoben/24768.html

您可能感興趣的文章: