之前專門寫的一個基于Jcrop圖片裁剪實(shí)現(xiàn)的插件文章，希望對你有幫助
創(chuàng)新互聯(lián)專注于魯山企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),成都做商城網(wǎng)站。魯山網(wǎng)站建設(shè)公司,為魯山等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
/*
缺陷，當(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"});
});
})
都是jQuery 圖像裁剪插件，不能說那個好用，原理是一樣的。感覺jQuery Jcrop 插件的功能強(qiáng)大些
div id="cutImage" style="display: none;"
div class="bigImg" style="float: left;"
img id="srcImg" src="" width="400px" height="270px"/
/div
div id="preview_box" class="previewImg"
img id="previewImg" src="" width="120px"/
/div
div
form action="" method="post" id="crop_form"
input type="hidden" id="bigImage" name="bigImage"/
input type="hidden" id="x" name="x" /
input type="hidden" id="y" name="y" /
input type="hidden" id="w" name="w" /
input type="hidden" id="h" name="h" /
Pinput type="button" value="確認(rèn)" id="crop_submit"http://P
/form
/div
/div
樣式：大圖、小圖展示都需要固定高度、寬度，因?yàn)楹笈_需要進(jìn)行放大處理。即：img width=""height=""/
然后是使用jcrop了。在使用jcrop前我們需要下載jcrop：。
將下載的壓縮包解壓后可以看到三個文件夾及一個index.html文件，/
css下放置的是Jcorp的樣式文件，/demo下放置的是幾個簡單的例子（index.html中引用的鏈接就是放置在這個文件夾下），/js下放置的是Jcorp中最重要的腳本文件。我們只需要使用三個文件即可：jquery.Jcrop.css、jquery.Jcrop.js、JQuery.js
使用方法：
復(fù)制代碼 代碼如下:
//裁剪圖像
function cutImage(){
$("#srcImg").Jcrop( {
aspectRatio : 1,
onChange : showCoords,
onSelect : showCoords,
minSize :[200,200]
});
//簡單的事件處理程序，響應(yīng)自onChange,onSelect事件，按照上面的Jcrop調(diào)用
function showCoords(obj) {
$("#x").val(obj.x);
$("#y").val(obj.y);
$("#w").val(obj.w);
$("#h").val(obj.h);
if (parseInt(obj.w) 0) {
//計算預(yù)覽區(qū)域圖片縮放的比例，通過計算顯示區(qū)域的寬度(與高度)與剪裁的寬度(與高度)之比得到
var rx = $("#preview_box").width() / obj.w;
var ry = $("#preview_box").height() / obj.h;
//通過比例值控制圖片的樣式與顯示
$("#previewImg").css( {
width : Math.round(rx * $("#srcImg").width()) + "px", //預(yù)覽圖片寬度為計算比例值與原圖片寬度的乘積
height : Math.round(rx * $("#srcImg").height()) + "px", //預(yù)覽圖片高度為計算比例值與原圖片高度的乘積
marginLeft : "-" + Math.round(rx * obj.x) + "px",
marginTop : "-" + Math.round(ry * obj.y) + "px"
});
}
}
}
在使用jcrop前一定要先將$(“”).jcrop();進(jìn)行預(yù)初始化，否則沒有效果。
還有一種調(diào)用的方法，
復(fù)制代碼 代碼如下:
var api = $.Jcrop('#cropbox',{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
這種方法是將Jcrop生成的對象賦給一個全局變量，這樣操作就會比較方便。
通過上面的js，就將X軸坐標(biāo)、Y軸坐標(biāo)、高度H、寬度W這個四個值傳遞給后臺了，后臺就只需要根據(jù)這四個值
進(jìn)行放大處理，然后切割即可。
Action
復(fù)制代碼 代碼如下:
/**
* 裁剪頭像
*/
public String cutImage(){
/*
* 獲取參數(shù)
* x,y,w,h,bigImage
*/
HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
int x = Integer.valueOf(request.getParameter("x"));
int y = Integer.valueOf(request.getParameter("y"));
int w = Integer.valueOf(request.getParameter("w"));
int h = Integer.valueOf(request.getParameter("h"));
String bigImage = request.getParameter("bigImage");
//獲取文件真實(shí)路徑
//獲取文件名
String[] imageNameS = bigImage.split("/");
String imageName = imageNameS[imageNameS.length-1];
//文件正式路徑
String imagePath = getSavePath()+"\\"+imageName;
//切割圖片
ImageCut imageCut = new ImageCut();
imageCut.cutImage(imagePath, x, y, w, h);
//頭像裁剪完成后，將圖片路徑保存到用戶
UserBean userBean = (UserBean) request.getSession().getAttribute("userBean");
userBean.setUserPhoto(bigImage);
//保存頭像
UserCenterService centerService = new UserCenterService();
centerService.updatePhoto(userBean);
//將修改后的用戶保存到session中
request.getSession().setAttribute("userBean", userBean);
return "updatePhoto";
}
}
裁剪圖片工具類：ImageCut.java
復(fù)制代碼 代碼如下:
public class ImageCut {
/**
* 圖片切割
* @param imagePath 原圖地址
* @param x 目標(biāo)切片坐標(biāo) X軸起點(diǎn)
* @param y 目標(biāo)切片坐標(biāo) Y軸起點(diǎn)
* @param w 目標(biāo)切片 寬度
* @param h 目標(biāo)切片 高度
*/
public void cutImage(String imagePath, int x ,int y ,int w,int h){
try {
Image img;
ImageFilter cropFilter;
// 讀取源圖像
BufferedImage bi = ImageIO.read(new File(imagePath));
int srcWidth = bi.getWidth(); // 源圖寬度
int srcHeight = bi.getHeight(); // 源圖高度
//若原圖大小大于切片大小，則進(jìn)行切割
if (srcWidth = w srcHeight = h) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
int x1 = x*srcWidth/400;
int y1 = y*srcHeight/270;
int w1 = w*srcWidth/400;
int h1 = h*srcHeight/270;
cropFilter = new CropImageFilter(x1, y1, w1, h1);
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(w1, h1,BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 繪制縮小后的圖
g.dispose();
// 輸出為文件
ImageIO.write(tag, "JPEG", new File(imagePath));
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
網(wǎng)上很多這樣的圖片裁剪插件，最好用最常用的是jcrop，這里是他的官網(wǎng)
當(dāng)然中文翻譯過來的文章也很多，樓主可以搜索下~
js或者jQuery在這里只能實(shí)現(xiàn)確立要裁剪的范圍，實(shí)際的裁剪是要交給后臺進(jìn)行的。
基本思路就是，設(shè)定一個半透明框，在要裁剪的圖片中進(jìn)行拖動和定位，然后把這個框的范圍（也就是四個角的坐標(biāo)送到后臺），后臺如PHP提供相關(guān)的圖片處理函數(shù)，對圖片進(jìn)行裁剪。
思路比較簡單，操作起來也不難。
希望對樓主有幫助~~
重慶分公司
重慶分公司
