最近專案中有一個擷取圖片的效果,於是在用到了Jcrop框架,使用中看API然後網上查閱一些文章勉勉強強算完成了這個功能,現將過程總結如下

實現思路

Jcrop來獲取擷取圖片的起點XY和終點xy,另外還有擷取範圍的wh,--將這些資料傳遞給伺服器端,然後由伺服器端相應語言的API進行裁剪或者透明等等操作.

官網URL：

實現效果如下圖：

裁剪後

功能描述

              將原圖進行固定範圍裁剪，然後等比縮小[相應的圖片內容要有].將原圖縮小並且進行裁剪圓形的操作。因為頭像一般用做頭像來使用，所以採取200*200的圓形。

說明

下面我貼出來一些code  

下面我貼出一些code:
		<span style="white-space:pre">	</span>//插入圖片
                	$('#target-img').html('');
                	$('#target-img').append('<img id="target" src="'+$scope.updateUserObj.HeadImg+'?rnd='+Math.random()+'" />');
                	$('.close').click();
                	$scope.showHeadImg();
               <span style="white-space:pre">		</span>//宣告jcrop裁剪圖片	
                <span style="white-space:pre">	</span>$('#target').Jcrop({
             	        onChange:   showCoords,
             	        onSelect:   showCoords,
             	        onRelease:  clearCoords,
             	        setSelect : [0,0,200,200],
             	        aspectRatio : 1
             	      },function(){
             	        jcrop_api = this;
             	      <span style="white-space:pre">	</span>
             	    });
 

<script> 
	function changeTable(obj){
		$('.bootTab').removeClass('active');
		$(obj).addClass('active');
		var tabcontent = $(obj).attr('data-target');
		$('.tab-pane').removeClass('active');
		$('#'+tabcontent).addClass('active');
	}
	
	
	 function showCoords(c)
	  {
	    $('#x1').val(parseInt(c.x));
	    $('#y1').val(parseInt(c.y));
	    $('#x2').val(parseInt(c.x2));
	    $('#y2').val(parseInt(c.y2));
	    $('#w').val(parseInt(c.w));
	    $('#h').val(parseInt(c.h));
	  };

	  function clearCoords()
	  {
	    $('#coords input').val('');
	  };
	
</script>
 

Jcrop基本上就是這樣了,它靠繫結一個img元件來渲染出來裁剪控制元件的效果，官網案例中的相應code可以copy過來用，可以獲取相應的上文中的起點座標終點座標，另外就是寬高了,控制正方體用aspectRatio屬性，將屬性值設定成1即可。相應的其他屬性看官網咖，給的很清楚

問題

Jcrop在運用中往往會出現圖片大小的問題,也就是如果圖片過大，此時我們用boxWidth或者其他CSS限制了圖片本來的畫素值，致使圖片縮小，這時候選框獲取到圖片相應的座標傳遞到後臺的不是圖片實際我們想要的座標，於是裁剪到了並不是我們想要的區域。這時候就要保證我們傳遞過來的座標是實時的。而不是選框在縮小圖片上的座標。很多人遇到了這個問題。解決方案來說一般分成2個:個人選擇了第一個。。

1、將圖片不管大小的顯示出來

2、 將圖片按照一定比例顯示出來，但是傳遞到後臺的時候需要經歷一個比例換算。