jQuery imgareaselect同時裁剪多個區(qū)域

你可以做個按鈕：保存裁剪區(qū)域。點擊時，保存坐標(biāo)點，然后在旁邊生成個縮略圖列表，并清空區(qū)域，等待提交或繼續(xù)生成下一個區(qū)域。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了民樂免費建站歡迎大家使用！

當(dāng)提交時，把列表（坐標(biāo)點數(shù)組）同時提交給后臺處理就好。

怎么用js或者jquery實現(xiàn)本地裁剪

網(wǎng)上很多這樣的圖片裁剪插件，最好用最常用的是jcrop，這里是他的官網(wǎng)

當(dāng)然中文翻譯過來的文章也很多，樓主可以搜索下~

js或者jQuery在這里只能實現(xiàn)確立要裁剪的范圍，實際的裁剪是要交給后臺進行的。

基本思路就是，設(shè)定一個半透明框，在要裁剪的圖片中進行拖動和定位，然后把這個框的范圍（也就是四個角的坐標(biāo)送到后臺），后臺如PHP提供相關(guān)的圖片處理函數(shù)，對圖片進行裁剪。

思路比較簡單，操作起來也不難。

希望對樓主有幫助~~

Jquery的Jcrop圖片裁剪插件，被裁剪的圖片改不了，重新給別的src顯示還是原來那張圖

之前專門寫的一個基于Jcrop圖片裁剪實現(xiàn)的插件文章，希望對你有幫助

jQuery imgareaselect裁剪

/*

缺陷，當(dāng)前在ff3下，用jquery的 width()與height()函數(shù)，在不設(shè)置圖片的寬度與高度的時候，不能取到

需要在圖片load函數(shù)里面初始化才可以

*/

sanshi_imgareaselect = function(pic_id,view_div_id){

this.pic_obj = jQuery("#"+pic_id);

this.pic_width;

this.pic_height;

this.view_div_id = view_div_id;

this.view_width = 100;

this.view_height = 100;

this.view_img_id = view_div_id+"_sanshi_img";

this.ias;

}

//建立預(yù)覽圖片

sanshi_imgareaselect.prototype.make_view_pic =function(){

var img_obj = jQuery(document.createElement("IMG"));

img_obj.attr("src",this.pic_obj.attr("src"));

img_obj.attr("id",this.view_img_id);

img_obj.attr("width",this.view_width);

img_obj.attr("height",this.view_height);

return img_obj;

}

//初始化函數(shù)

sanshi_imgareaselect.prototype.init=function(){

this.pic_width = this.pic_obj.attr("width");

this.pic_height = this.pic_obj.attr("height");

//alert(this.pic_width+":"+this.pic_height);

//添加圖片

jQuery("#"+this.view_div_id).append(this.make_view_pic());

//設(shè)置預(yù)覽加載層樣式

jQuery("#"+this.view_div_id).css({'width':this.view_width,'height':this.view_height,'overflow':'hidden'});

//構(gòu)造選擇區(qū)域完成的函數(shù)

var fun_str="if ( selection.width selection.height){ var scaleX = "+this.view_width+" / selection.width;var scaleY = "+this.view_height+" / selection.height;jQuery('#"+this.view_img_id+"').css({width: Math.round(scaleX * "+this.pic_width+"),height: Math.round(scaleY * "+this.pic_height+"),marginLeft: -Math.round(scaleX * selection.x1),marginTop: -Math.round(scaleY * selection.y1)});}";

//alert(fun_str);

//初始化imgAreaSelect 函數(shù)

var ias = this.pic_obj.imgAreaSelect({

//設(shè)置選擇框的比列

//aspectRatio:"1:1",

//設(shè)置框的添加效果

fadeSpeed:200,

//選擇框選擇完畢是否自己取消

autoHide:false,

//是否顯示圖片遮罩層

show:true,

//是否采用api

instance: true,

//設(shè)置初始函數(shù) 畫出選擇框

onInit:function(img, selection){ias.setSelection(100, 50, 250, 150, true);ias.update();},

//設(shè)置選擇完畢的函數(shù)，采用了動態(tài)執(zhí)行

onSelectEnd:function(img, selection){eval(fun_str);}

});

//賦值給全局

this.ias = ias;

}

//保存事件 采用的是get方式提交

sanshi_imgareaselect.prototype.save_pic=function(post_page,post_param){

var opt = this.ias.getSelection(true);

var post_arr = new Array();

jQuery.each(post_param,function(i,n){

var temp_str =i+"=";

temp_str += opt[n] ? opt[n] : n;

post_arr.push(temp_str);

});

//判斷，是否有參數(shù)

post_page += post_page.lastIndexOf("?")0 ? "?" : "";

//拼裝get方式的url

post_url = post_page+post_arr.join("");

alert(post_url);

}

//這個是封裝后js代碼

$(document).ready(function () {

//聲明函數(shù)

var sanshi_img = new sanshi_imgareaselect("mypic","preview");

//確保圖片加載完成執(zhí)行初始化函數(shù)，這樣避免上面的提到的bug，否則不能保證兼容性

$("#mypic").load(function(){sanshi_img.init();});

//監(jiān)聽保存事件

$("#save_pic").click(function(){

sanshi_img.save_pic('1.php?n=6',{"id":5,"px1":"x1","py1":"y1",'px2':"x2","py2":"y2",'pwidth':"width",'pheight':"height"});

});

})