jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一

上一节随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例：

首先，要知道我们应该实现什么功能？

（1）图片能够实现上传预览功能

（2）拖拽裁剪图片，使其能够显示裁剪后的区域

（3）显示要裁剪区域的坐标

其次，该如何引用该插件呢？

   那就具体看一下吧！

第一步：先将样式和文件包引入（根据你自己的位置引入）

第二步：先用div布局样式,如下图所示

 
 
亲，请上传图片并裁剪
 
    
  
   
 
   
 
 

 选区预览
 
 
  
  
  
  
  
 
 

  

  

  
 坐标
  
  
  

  

  
X1:
  

  
  

  
Y1:
  

  
  
  
  
X2:
  

  
  

  
Y2:
  

  
  
  
 
 
 
  
 

　　css样式：

 #uploadPreview
 {
 width: 170px;
 height: 170px;   
 background-position: center center;
 background-size: cover;
 border: 1px solid brown;
 -webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
 display: inline-block;
 }
 

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

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

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

点击浏览

点击选择 ：

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

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

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

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

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

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

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

 
 
 
  
 
 
 
 
 
 
 
 
 
 

 Click and drag on the image to select an area.
 
 
  
 
  
 
 
 

 Selection Preview
 
 
  
  
    
  
 

  

  

  
 Coordinates
  
  
  

  

  
X1:
  

  
  

  
Y1:
  

  
  

  
X2:
  

  
  

  
Y2:
  

  
  
  
 
 
 
 
 

以上所述是小编给大家介绍的jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！