1, tapmodo / Jcrop
在成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)過(guò)程中，需要針對(duì)客戶的行業(yè)特點(diǎn)、產(chǎn)品特性、目標(biāo)受眾和市場(chǎng)情況進(jìn)行定位分析，以確定網(wǎng)站的風(fēng)格、色彩、版式、交互等方面的設(shè)計(jì)方向。成都創(chuàng)新互聯(lián)公司還需要根據(jù)客戶的需求進(jìn)行功能模塊的開(kāi)發(fā)和設(shè)計(jì)，包括內(nèi)容管理、前臺(tái)展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計(jì)和安全保護(hù)等功能。
Jcrop是人氣最高的圖片裁剪jQuery插件，stars數(shù)量2k+，功能非常豐富，文檔齊全，首選。Github.com官網(wǎng)也使用了這個(gè)插件。有一個(gè)小細(xì)節(jié)是，邊框線的螞蟻線是動(dòng)畫(huà)的，真的很用心。
2, fengyuanchen / cropper
Cropper也是一款圖片裁剪jQuery插件，stars數(shù)量1k+，是杭州的前端工程師Fengyuan Chen所寫(xiě)的，功能也相當(dāng)豐富，裁剪時(shí)還可以對(duì)原圖進(jìn)行旋轉(zhuǎn)。
3, imgAreaSelect 也是比較經(jīng)典的圖片裁剪jQuery插件，我很久以前就在自己的項(xiàng)目中使用過(guò)，stars數(shù)量500+。
網(wǎng)上很多這樣的圖片裁剪插件，最好用最常用的是jcrop，這里是他的官網(wǎng)
當(dāng)然中文翻譯過(guò)來(lái)的文章也很多，樓主可以搜索下~
js或者jQuery在這里只能實(shí)現(xiàn)確立要裁剪的范圍，實(shí)際的裁剪是要交給后臺(tái)進(jìn)行的。
基本思路就是，設(shè)定一個(gè)半透明框，在要裁剪的圖片中進(jìn)行拖動(dòng)和定位，然后把這個(gè)框的范圍（也就是四個(gè)角的坐標(biāo)送到后臺(tái)），后臺(tái)如PHP提供相關(guān)的圖片處理函數(shù)，對(duì)圖片進(jìn)行裁剪。
思路比較簡(jiǎn)單，操作起來(lái)也不難。
希望對(duì)樓主有幫助~~
之前專(zhuān)門(mén)寫(xiě)的一個(gè)基于Jcrop圖片裁剪實(shí)現(xiàn)的插件文章，希望對(duì)你有幫助
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)楹笈_(tái)需要進(jìn)行放大處理。即：img width=""height=""/
然后是使用jcrop了。在使用jcrop前我們需要下載jcrop：。
將下載的壓縮包解壓后可以看到三個(gè)文件夾及一個(gè)index.html文件，/
css下放置的是Jcorp的樣式文件，/demo下放置的是幾個(gè)簡(jiǎn)單的例子（index.html中引用的鏈接就是放置在這個(gè)文件夾下），/js下放置的是Jcorp中最重要的腳本文件。我們只需要使用三個(gè)文件即可：jquery.Jcrop.css、jquery.Jcrop.js、JQuery.js
使用方法：
復(fù)制代碼 代碼如下:
//裁剪圖像
function cutImage(){
$("#srcImg").Jcrop( {
aspectRatio : 1,
onChange : showCoords,
onSelect : showCoords,
minSize :[200,200]
});
//簡(jiǎn)單的事件處理程序，響應(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) {
//計(jì)算預(yù)覽區(qū)域圖片縮放的比例，通過(guò)計(jì)算顯示區(qū)域的寬度(與高度)與剪裁的寬度(與高度)之比得到
var rx = $("#preview_box").width() / obj.w;
var ry = $("#preview_box").height() / obj.h;
//通過(guò)比例值控制圖片的樣式與顯示
$("#previewImg").css( {
width : Math.round(rx * $("#srcImg").width()) + "px", //預(yù)覽圖片寬度為計(jì)算比例值與原圖片寬度的乘積
height : Math.round(rx * $("#srcImg").height()) + "px", //預(yù)覽圖片高度為計(jì)算比例值與原圖片高度的乘積
marginLeft : "-" + Math.round(rx * obj.x) + "px",
marginTop : "-" + Math.round(ry * obj.y) + "px"
});
}
}
}
在使用jcrop前一定要先將$(“”).jcrop();進(jìn)行預(yù)初始化，否則沒(méi)有效果。
還有一種調(diào)用的方法，
復(fù)制代碼 代碼如下:
var api = $.Jcrop('#cropbox',{
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
這種方法是將Jcrop生成的對(duì)象賦給一個(gè)全局變量，這樣操作就會(huì)比較方便。
通過(guò)上面的js，就將X軸坐標(biāo)、Y軸坐標(biāo)、高度H、寬度W這個(gè)四個(gè)值傳遞給后臺(tái)了，后臺(tái)就只需要根據(jù)這四個(gè)值
進(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";
}
}
裁剪圖片工具類(lèi)：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();
}
}
}
/*
缺陷，當(dāng)前在ff3下，用jquery的 width()與height()函數(shù)，在不設(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ù) 畫(huà)出選擇框
onInit:function(img, selection){ias.setSelection(100, 50, 250, 150, true);ias.update();},
//設(shè)置選擇完畢的函數(shù)，采用了動(dòng)態(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);
}
//這個(gè)是封裝后js代碼
$(document).ready(function () {
//聲明函數(shù)
var sanshi_img = new sanshi_imgareaselect("mypic","preview");
//確保圖片加載完成執(zhí)行初始化函數(shù)，這樣避免上面的提到的bug，否則不能保證兼容性
$("#mypic").load(function(){sanshi_img.init();});
//監(jiān)聽(tīng)保存事件
$("#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"});
});
})
你的思路應(yīng)該錯(cuò)了，我給你梳理下吧：
用jquery.imgareaselect實(shí)際上主要是利用它幫你獲得預(yù)覽圖和剪裁數(shù)據(jù)。然后將數(shù)據(jù)發(fā)送后臺(tái)根據(jù)這些數(shù)據(jù)就可以從原始圖片中重新畫(huà)出你選擇部分的圖片信息了。
1，你異步上傳后將圖片訪問(wèn)路徑設(shè)置到剪裁區(qū)img.src;
2，利用imgareaselect的回調(diào)函數(shù)拿到圖片引用img和選擇對(duì)象selection，從img拿到引用圖片width\height，selection拿到左上角的坐標(biāo)x1\y1，右下角的坐標(biāo)x2\y2，選擇區(qū)寬高width\height。
3，將2中拿到的數(shù)據(jù)發(fā)送到后臺(tái)，后臺(tái)根據(jù)這些數(shù)據(jù)和原始圖片信息畫(huà)出選擇區(qū)的圖像。
重慶分公司
重慶分公司
