|
|
請(qǐng)“運(yùn)行代碼”先試下運(yùn)行，運(yùn)行后請(qǐng)刷新一次，感受下：
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
目前做的這個(gè)項(xiàng)目中要用到用戶頭像功能，領(lǐng)導(dǎo)說(shuō)最好是做成用戶上傳一個(gè)圖片后可以用圖像裁剪的方法自己選擇頭像。同事推薦了Jcrop這個(gè)插件，到它的官方站點(diǎn)http://deepliquid.com/content/Jcrop.html 如果網(wǎng)速太慢，請(qǐng)直接點(diǎn)擊這里下載。下載了最新版的壓縮包，壓縮包中包括了Jcrop的幾個(gè)demo文件，關(guān)鍵的Jcrop.js文件和jQuery.Jcrop.css文件。基本上來(lái)說(shuō)參照它的幾個(gè)demo文件就可以學(xué)會(huì)使用這個(gè)插件了。晚上正好學(xué)習(xí)研究了下，現(xiàn)簡(jiǎn)單總結(jié)如下，也方便下英文不好的朋友們。
使用插件必須條件：引入jQuery.js文件，引入jQuery.Jcrop.js文件，引入JQuery.Jcrop.css文件。
1.最基本使用方法
html代碼部分：
復(fù)制代碼 代碼如下:
<img src="demo_files/flowers.gif" id="demoImage"/>
js部分：
復(fù)制代碼 代碼如下:
$(
function()
{
$("#demoImage").Jcrop();
}
);
這樣就可以在圖片上進(jìn)行裁剪了。
2.得到選中區(qū)域的坐標(biāo)以及回調(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, //當(dāng)選擇區(qū)域變化的時(shí)候，執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)
onSelect:showCoords //當(dāng)選中區(qū)域的時(shí)候，執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)
});
});
function showCoords(c) {
$("#txtX1").val(c.x); //得到選中區(qū)域左上角橫坐標(biāo)
$("#txtY1").val(c.y); //得到選中區(qū)域左上角縱坐標(biāo)
$("#txtX2").val(c.x2); //得到選中區(qū)域右下角橫坐標(biāo)
$("#txtY2").val(c.y2); //得到選中區(qū)域右下角縱坐標(biāo)
$("#txtWidth").val(c.w); //得到選中區(qū)域的寬度
$("#txtHeight").val(c.h); //得到選中區(qū)域的高度
}
3.常用選項(xiàng)設(shè)置
復(fù)制代碼 代碼如下:
ASPectRatio:選中區(qū)域按寬/高比，為1表示正方形。
minSize:最小的寬，高值。
maxSize:最大的寬，高值。
setSelect:設(shè)置初始選中區(qū)域。
bgColor:背景顏色
bgOpacity:背景透明度。
allowResize:是否允許改變選中區(qū)域大小。
allowMove:是否允許移動(dòng)選中區(qū)域。
舉例如下：
復(fù)制代碼 代碼如下:
$(function() {
$("#demoImage").Jcrop({
ASPectRatio: 1, //選中區(qū)域?qū)捀弑葹?，即選中區(qū)域?yàn)檎叫?
bgColor:"#ccc", //裁剪時(shí)背景顏色設(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.jb51.NET/jiaoben/24768.html
JavaScript技術(shù)：JQuery Jcrop 實(shí)現(xiàn)圖片裁剪的插件，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
