cropzoom 制作头像裁剪功能 难点总结

 公司需要做一个类似开心网的头像裁剪功能，发现cropzoom可以实现一模一样的效果，我在这里把使用cropzoom做头像裁剪的一个难点写出来，希望能帮到大家

 

 http://www.helloweba.com/view-blog-51.html 这里有使用cropzoom做图片裁剪的完整的demo，在这里我就不多说了，我只在这里把这个例子中没有告诉我们的说一下，

 

前提：

 

 

 cropzoom = $('#cropzoom_container').cropzoom({
  width: cropzoom_width,
  height: cropzoom_height,
  bgColor: '#ccc',
  enableRotation: true, //是否可旋转
 enableZoom: true, //是否放大、缩小、变焦
 zoomSteps:10,
  rotationSteps:10,
				

 selector: {
				 
				   showPositionsOnDrag:true,  //显示 选择框的左上角的坐标:x:175px,Y:80px
				    showDimetionsOnDrag:true,  //显示 选择框的的大小
 centered: true,            //旋转框是否存在图片的中央
 bgInfoLayer:'#fff',
 borderColor: 'blue',
 borderColorHover: 'red',
 x:0,
 y:0,
 w:100,
 h:100
},
 image: {
   source: msg,
   width: 260,
   height: 340,
   minZoom: 30,
   maxZoom: 150
 }
});

 

  1、图片被的缩放后的尺寸：

      

var imageZoomW = cropzoom.data('image').w; //图像缩放后的宽
var imageZoomH = cropzoom.data('image').h;//图像缩放后的高

 2、选择框的坐标：

  

var imageX = cropzoom.data('selector').x; //图像x坐标
var imageY = cropzoom.data('selector').y; //图像Y坐标
var imageW = cropzoom.data('selector').w; //图像宽
var imageH = cropzoom.data('selector').h; //图像高

 

  3、开始以为拿到了图片缩放后的尺寸，和 选择框的尺寸，以及选择框的左顶点的坐标就可以拿到准确的裁剪出图片了，但是按照这些数据裁剪出来的图片和实际选择的页面的有很大的偏差，找了很久终于找到了问题的症结:

       cropzoom.data('selector').x 和var imageY = cropzoom.data('selector').y拿到的是 选择框selector相对于 cropzoom的边框的坐标，但是实际上应该取选择框相对于图片的最左边和最上面的距离才对，修改代码为：

   

 

  

var imageX = cropzoom.data('selector').x; //图像x坐标
var imageY = cropzoom.data('selector').y; //图像Y坐标
var imageW = cropzoom.data('selector').w; //图像宽
var imageH = cropzoom.data('selector').h; //图像高
var imageZoomW = cropzoom.data('image').w; //图像缩放后的宽
var imageZoomH = cropzoom.data('image').h;//图像缩放后的高
			 		  
//如果cropzoom比图片的的缩放宽度要宽
if(cropzoom_width >imageZoomW ){
     imageX = imageX - ((cropzoom_width -imageZoomW )/2);
//如果cropzoom比图片的的缩放宽度要窄
}else if(cropzoom_width < imageZoomW ){
    imageX = imageX + ((imageZoomW -cropzoom_width )/2);
}
				
//如果cropzoom比图片的的缩放宽度要高
if(cropzoom_height > imageZoomH ){
    imageY = imageY - ((cropzoom_height -imageZoomH )/2);
//如果cropzoom比图片的的缩放宽度要高
}else if(cropzoom_height < imageZoomH ){
 imageY = imageY + ((imageZoomH -cropzoom_height )/2);
}
				
				
 alert("imageX: "+imageX + " imageY: "+ imageY + " imageW: "+ imageW + "imageH: "+imageH );
  alert("W:" + imageZoomW + " H:"  + imageZoomH);

 

评论

1 楼 小怪兽 2012-10-23  

关于这个坐标获取 楼主那段代码貌似有问题。