jQuery插件ImgAreaSelect如何实现头像上传预览和裁剪功能

css样式：

第三步：实现图片的上传预览效果

思路：通过input 将图片的 src传给第一个img，然后再将第一个img的src传给第二个img的src

这样，就能够实现如下效果：

点击浏览

点击选择 ：

第四步：实现区域选择功能

这样就可以实现如下效果啦~~~

到这一步就可以实现头像的上传以及裁剪功能了，当然后期还要将路径添加到数据库就更完美了~~~~

 （------------------------------------------------------------------------此处应有分割线----------------------------------------------------------------------）

如果你只想实现简单的图片裁剪功能，那么可以看看下面代码，此处不做注释了~~~

当然，如果上边的代码看不太明白，也可以参照下面的这个进行修改，将图片上传预览功能添加上即可哈~~~~

效果图：（对比图片就可以知道，下面这个就只是少了浏览功能，其他完全一样）

 
 
 
  
 
 
 
 
 $(document).ready(function() {
 $('#photo').imgAreaSelect( {handles:true, fadeSpeed:200, onSelectEnd : preview});
 });
// 如果加上aspectRatio: '1:1'，$('#photo').imgAreaSelect( {aspectRatio: '1:1',handles:true, fadeSpeed:200, onSelectEnd : preview});则选取区域固定为正方形。
 function preview(img, selection)
 {
 //等同于var scaleX = 100 / (selection.width || 1) 
 //先对||前面的进行布尔运算,如果结果是true(即width存在且不是0),就使用width,否则使用||后的变量1
 //也就是先检查 selection.width 有没有值，有的话就用 100 / 该值再付给 scaleX，没的话就用 100 / 1 来赋值；
 if(!selection.width || !selection.height)
  return; 
 var scaleX = 100 / selection.width;
 var scaleY = 100 / selection.height; 
 //设置裁剪后图片的宽高 
 $('#preview img').css( {
  width : Math.round(scaleX * 200),
  height: Math.round(scaleY * 200),
  marginLeft: -Math.round(scaleX * selection.x1),
  marginTop: -Math.round(scaleY * selection.y1)
 }); 
 $('#x1').val(selection.x1);
 $('#y1').val(selection.y1);
 $('#x2').val(selection.x2);
 $('#y2').val(selection.y2);
 $('w').val(selection.width);
 $('h').val(selection.height);
 }
 
 
 
 

 
 
 

 Click and drag on the image to select an area.
 
 
  
 
  
 
 
 
 Selection Preview
 

 
  
  
    
  
 
  
  
   Coordinates
  
  
  
  
  X1:
  
  
  
  Y1:
  
  
  
  X2:
  
  
  
  Y2:
  
    
  
  
 
 
 

看完了这篇文章，相信你对“jQuery插件ImgAreaSelect如何实现头像上传预览和裁剪功能”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！