JavaScript圖片裁剪

標籤：index   nbsp   使用   bsp   pos   調用   ted   osi   article   

1.jquery 圖片裁剪庫選擇

Jcrop：http://deepliquid.com/content/Jcrop.html

imgareaselect：http://odyniec.net/projects/imgareaselect/

CropZoom：https://github.com/cropzoom/cropzoom

可供選擇的jQuery外掛程式許多，這裡選擇 imgareaselect 進行具體示範

 

2.綜合示範效果

 

2.1 左側地區是 div + img 標籤，用來展示原圖，詳細需求

（1）左側展示使用者上傳的原圖，原圖能夠超大，能夠超小。

大圖就等比例壓縮展示，小圖不壓縮

（2）左側地區最大寬度是 608px。這個參數要求能夠定製！

（3）左側裁剪，要求依照【右側預覽地區的高寬比】進行裁剪

2.2 右側地區也是 div + img 標籤。用來展示【裁剪部分】的預覽圖

（1）預覽地區的高寬是 608*304 ，要求能夠定製

（2）左側裁剪部分的圖在這裡全屏體現出來

這種要求事實上是從使用者體驗出發的。保證了效果：

（1）原圖無論多大多小，都會依照原圖比例展示出來

（2）左側地區最大寬度固定，這樣左側不會過寬，【導致右側預覽沒地方】

可是要注意。假設使用者上傳非常小的圖。而且【裁剪的部分】本身就小於【預覽的高寬】

那麼會等比例展開展示，事實上能夠做到不展開，可是這種話就影響了總體頁面配置！

 

上述參數指標應該說很具體了。提供了 原圖、左側展示圖、裁剪區、右側預覽圖的指標

而且依據【左側展示圖】+【原圖】+【裁剪區座標】計算出來在原圖上裁剪點座標

這樣方便後台對原圖進行真實裁剪。

 

3、二次封裝與實現

（1）支援計算各種座標的回呼函數

（2）支援左側、右側 各種指標的定製

（3）支援圖片載入完畢才開始出現效果

防止使用者上傳超大圖。圖片還沒載入完畢就調用imgAreaSelect的方法。導致在某些瀏覽器裡面沒有效果

官方提供的簡單示範範例，在遇到上傳超大圖，比方10M圖片時，事實上都有問題。

先來看看html代碼。很easy

<input type="button" value="上傳" onclick="testUpload()" /> <br/>X1:<input id="X1" type="text" />Y1:<input id="Y1" type="text" /><br/>X2:<input id="X2" type="text" />Y2:<input id="Y2" type="text" /><br/>裁剪區寬度:<input id="aWidth" type="text" />裁剪區高度:<input id="aHeight" type="text" /> <br/>真實寬度:<input id="rWidth" type="text" />真實高度:<input id="rHeight" type="text" /> <br/>展示寬度:<input id="sWidth" type="text" />展示高度:<input id="sHeight" type="text" /> <br/>預覽寬度:<input id="pWidth" type="text" />預覽高度:<input id="pHeight" type="text" /> <br/><h3>依據[真實高寬+展示高寬+裁剪區座標]計算出來在真實圖片上應該裁剪的座標</h3>Real-X1:<input id="rX1" type="text" />Real-Y1:<input id="rY1" type="text" /><br/>Real-X2:<input id="rX2" type="text" />Real-Y2:<input id="rY2" type="text" /><br/></div><!-- 左側地區：用來依照原圖比例展示使用者上傳的圖片 由於要保證左側地區最大寬度不超過 608，所以這裡width要設定！ 假設你的需求不同，就自訂一個寬度。 高度不須要設定，假設原圖超大，寬度就依照 608展示，而高度就是等比例壓縮的。不能確定高度！ 假設圖片本身還不到 608 寬度。那麼就會依照原圖展示出來--><div id="leftDiv" style="float:left;width:608px;height:auto;border:1px solid #CCC;overflow:hidden;"><img src=""></div><!-- 右側地區：用來展示左側裁剪的部分，div的高寬就必須定義好比方這裡要求依照 608*304規格展示。那麼就必須設定好。其它樣式隨便你自訂。注意div裡面能夠不放 img 標籤 --><div id="previewDiv" style="width: 608px; height:304px;float:left;margin-left:10px; overflow: hidden; border:1px dotted #ccc"></div>

再來看看怎樣調用

<title>圖片裁剪</title><link rel="stylesheet" type="text/css" href="<%=context%>/staticfile/imgselect/css/imgareaselect-default.css" /><script type="text/javascript" src="<%=context%>/staticfile/imgselect/scripts/jquery.min.js"></script><script type="text/javascript" src="<%=context%>/staticfile/imgselect/scripts/jquery.imgareaselect.pack.js"></script><script type="text/javascript" src="<%=context%>/staticfile/imgSelectedArea.js"></script></head><script type="text/javascript">function testUpload(){var left = $("#leftDiv");var right = $("#previewDiv");var imgSrc="http://pan.suning.com/cloud-web/index/images/intro/intro-01.jpg";//var imgSrc="staticfile/img/DSC02417.JPG";//var imgSrc="staticfile/img/2.jpg";// var imgSrc="staticfile/img/1.jpg";var preWidth = 608;var preHeight = 304;$("#pWidth").val(preWidth);$("#pHeight").val(preHeight);var initObject = {leftDiv:left,rightDiv:right,imgSrc:imgSrc,preWidth:preWidth,preHeight:preHeight};// 回呼函數(可選)var getImgInfo = function(imgInfo){$("#rWidth").val(imgInfo.realWidth);$("#rHeight").val(imgInfo.realHeight);$("#sWidth").val(imgInfo.showWidth);$("#sHeight").val(imgInfo.showHeight);}// 回呼函數(可選)var getAreaInfo = function(areaInfo){$("#X1").val(areaInfo.x1);$("#Y1").val(areaInfo.y1);$("#X2").val(areaInfo.x2);$("#Y2").val(areaInfo.y2);$("#aWidth").val(areaInfo.width);$("#aHeight").val(areaInfo.height);$("#rX1").val(areaInfo.rX1);$("#rY1").val(areaInfo.rY1);$("#rX2").val(areaInfo.rX2);$("#rY2").val(areaInfo.rY2);}initObject.getImgInfo = getImgInfo;initObject.getAreaInfo = getAreaInfo;initImgSelectedArea(initObject);}</script>

注意到：調用 initImgSelectedArea 方法就可以。傳一個json對象。

要求位json對象提供幾個參數和回呼函數，當中回呼函數是可選的！

這種方法就是在  imgSelectedArea.js 定義的

最後來看看imgSelectedArea.js檔案

/** * 圖片裁剪 *  * @param initObj{ * leftDiv:左側div容器 * rightDiv：右側div容器 * imgSrc：原圖的地址 * preWidth：右側預覽圖要求的寬度 * preHeight：右側預覽圖要求的高度 * getImgInfo：返回原圖、左側終於展示圖的高寬的回呼函數 * getAreaInfo：返回左側裁剪地區座標、高寬。以及映射到原圖上的座標 * } * @returns {succeed:(true|false),msg:‘處理結果‘} *  * @author yli */function initImgSelectedArea(initObj) {if (initObj) {var leftDiv = initObj.leftDiv || undefined;var rightDiv = initObj.rightDiv || undefined;var imgSrc = initObj.imgSrc || undefined;var preWidth = initObj.preWidth || 100;var preHeight = initObj.preHeight || 100;if(!leftDiv || !rightDiv || !imgSrc) {return {succeed : false,msg : ‘參數initObj屬性{leftDiv,rightDiv,imgSrc}沒有定義!‘};}// 擷取左側地區中img標籤var leftImg = leftDiv.find("img");// 綁定img.onload事件,確保圖片載入完畢才初始化裁剪地區 leftImg.load(function(){ // 圖片真實的寬度和高度var realWidth = $(this).width();var realHeight = $(this).height();// 左側地區要求將原圖所有展示出來,無論原圖多大多小// 因為左側地區div寬度受preWidth限制,因此對於超寬圖片要等比例壓縮if(realWidth>preWidth) {$(this).css({width:preWidth,height:(preWidth*realHeight)/realWidth});}// 左側地區屬性設定完畢,才顯示圖片$(this).css({display:‘block‘});// 預載入右側地區圖片,處於隱藏狀態// 裁剪左側地區圖片才顯示右側預覽圖if(rightDiv.find("img").size()==0){rightDiv.append(‘<img style="position:relative;display:none" src="‘+imgSrc+‘" />‘);}else {rightDiv.find("img").css({display:‘none‘}).attr("src",imgSrc);}// 左邊地區原圖可能被等比例壓縮展示展示(見上一步)// 而裁剪區是基於展示地區的高寬,因此擷取展示圖的高寬var showWidth = $(this).width();var showHeight = $(this).height();// 左側地區圖片裁剪觸發調用的函數var selectedChange = function(img, selection){// 此處使用預覽地區大小計算比例var scaleX = preWidth / (selection.width || 1);    var scaleY = preHeight / (selection.height || 1);        $("#sX").val(showWidth + ‘--->‘ + preWidth);    $("#sY").val(showHeight + ‘--->‘ + preHeight);        // 這雷根據左側圖片大小計算    rightDiv.find("img").css({    display:‘block‘,        width: Math.round(scaleX * showWidth) + ‘px‘,        height: Math.round(scaleY * showHeight) + ‘px‘,        marginLeft: ‘-‘ + Math.round(scaleX * selection.x1) + ‘px‘,        marginTop: ‘-‘ + Math.round(scaleY * selection.y1) + ‘px‘    });        // 調用回呼函數,返回裁剪地區資訊    if(initObj.getAreaInfo){initObj.getAreaInfo({x1:selection.x1,//裁剪地區左上方x1y1:selection.y1,//裁剪地區左上方y1x2:selection.x2,//裁剪地區右下角x2y2:selection.y2,//裁剪地區右下角x2width:selection.width,//裁剪地區寬度height:selection.height,//裁剪地區高度rX1:Math.round(realWidth*selection.x1/showWidth),//裁剪點映射到真實原圖上的座標rY1:Math.round(realHeight*selection.y1/showHeight),rX2:Math.round(realWidth*selection.x2/showWidth),rY2:Math.round(realHeight*selection.y2/showHeight)});    }};// 依照預覽圖的比例初始化裁剪地區,並依照左側可能最大展示地區初始化最大裁剪地區var previewRatio = preWidth+‘:‘+preHeight;leftImg.imgAreaSelect({ aspectRatio: previewRatio,handles: true, maxWidth:showWidth,maxHeight:showHeight,onSelectChange: selectedChange});// 調用回呼函數,返回圖片資訊if(initObj.getImgInfo){initObj.getImgInfo({realWidth:realWidth,//圖片真實寬度realHeight:realHeight,//圖片真實高度showWidth:showWidth,//展示寬度showHeight:showHeight//展示高度});} });  // 載入左側地區Img,初始化隱藏 leftImg.css({display:‘none‘}).attr("src", imgSrc);} else {return {succeed : false,msg : ‘方法入參initObj沒有定義!‘};}}

4、代碼下載

 http://cloud.suning.com/cloud-web/share/link.htm?

sk=aaacTU

JavaScript圖片裁剪