本文主要介绍了jquery插件imgareaselect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下，希望能帮助到大家。
上一节随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例：
首先，要知道我们应该实现什么功能？
（1）图片能够实现上传预览功能
（2）拖拽裁剪图片，使其能够显示裁剪后的区域
（3）显示要裁剪区域的坐标
其次，该如何引用该插件呢？
那就具体看一下吧！
第一步：先将样式和文件包引入（根据你自己的位置引入）
第二步：先用p布局样式,如下图所示
亲，请上传图片并裁剪
@@##@@
选区预览
@@##@@
| 坐标 | |
|---|---|
| X1: | |
| Y1: | |
| X2: | |
| Y2: | |
css样式：
第三步：实现图片的上传预览效果
思路：通过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实现获得选择域的图像信息
