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,	//裁剪區域左上角x1
						y1:selection.y1,	//裁剪區域左上角y1
						x2:selection.x2,	//裁剪區域右下角x2
						y2:selection.y2,	//裁剪區域右下角x2
						width: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圖片裁剪