Jcrop裁剪圖片[一] :前端js總結
來源：程序員人生 發布時間：2014-12-13 09:17:53 閱讀次數：2702次
最近項目中有1個截取圖片的效果,因而在用到了Jcrop框架,使用中看API然后網上查閱1些文章勉委曲強算完成了這個功能,現將進程總結以下
實現思路
Jcrop來獲得截取圖片的出發點XY和終點xy,另外還有截取范圍的wh,--將這些數據傳遞給服務器端,然后由服務器端相應語言的API進行裁剪或透明等等操作.
官網URL：
http://code.ciaoca.com/jquery/jcrop/
實現效果以下圖：
裁剪后
功能描寫
將原圖進行固定范圍裁剪，然后等比縮小[相應的圖片內容要有].將原圖縮小并且進行裁剪圓形的操作。由于頭像1般用做頭像來使用，所以采取200*200的圓形。
說明
下面我貼出來1些code
下面我貼出1些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基本上就是這樣了,它靠綁定1個img組件來渲染出來裁剪控件的效果，官網案例中的相應code可以copy過來用，可以獲得相應的上文中的出發點坐標終點坐標，另外就是寬高了,控制正方體用aspectRatio屬性，將屬性值設置成1便可。相應的其他屬性看官網吧，給的很清楚
問題
Jcrop在應用中常常會出現圖片大小的問題,也就是如果圖片過大，此時我們用boxWidth或其他CSS限制了圖片本來的像素值，導致圖片縮小，這時候候選框獲得到圖片相應的坐標傳遞到后臺的不是圖片實際我們想要的坐標，因而裁剪到了其實不是我們想要的區域。這時候候就要保證我們傳遞過來的坐標是實時的。而不是選框在縮小圖片上的坐標。很多人遇到了這個問題。解決方案來講1般分成2個:個人選擇了第1個。。
1、將圖片不管大小的顯示出來
2、 將圖片依照1定比例顯示出來，但是傳遞到后臺的時候需要經歷1個比例換算。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
