Jcrop裁剪图片[一] :前端js总结
来源：程序员人生 发布时间：2014-12-13 09:17:53 阅读次数：2503次
最近项目中有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个比例换算。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
