Jcrop裁剪图片[一] :前端js总结

最近项目中有一个截取图片的效果,于是在用到了Jcrop框架,使用中看API然后网上查阅一些文章勉勉强强算完成了这个功能,现将过程总结如下

实现思路

Jcrop来获取截取图片的起点XY和终点xy,另外还有截取范围的wh,--将这些数据传递给服务器端,然后由服务器端相应语言的API进行裁剪或者透明等等操作.

官网URL：

         http://code.ciaoca.com/jquery/jcrop/

实现效果如下图：

裁剪后

功能描述

将原图进行固定范围裁剪，然后等比缩小[相应的图片内容要有].将原图缩小并且进行裁剪圆形的操作。因为头像一般用做头像来使用，所以采取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、 将图片按照一定比例显示出来，但是传递到后台的时候需要经历一个比例换算。