随笔中，我们已经知道了关于jQuery插件ImgAreaSelect基本的知识；那么现在看一下实例：
首先，要知道我们应该实现什么功能？
（1）图片能够实现上传预览功能
（2）拖拽裁剪图片，使其能够显示裁剪后的区域
（3）显示要裁剪区域的坐标
其次，该如何引用该插件呢？
那就具体看一下吧！
第一步：先将样式和文件包引入（根据你自己的位置引入）
rush:js;">
第二步：先用div布局样式,如下图所示
rush:js;">
X1:Y1:X2:Y2:
css样式：
rush:js;">
第三步：实现图片的上传预览效果
思路：通过input 将图片的 src传给第一个img，然后再将第一个img的src传给第二个img的src
rush:js;">
这样，就能够实现如下效果：
点击浏览
点击选择 ：
第四步：实现区域选择功能
rush:js;">
这样就可以实现如下效果啦~~~
到这一步就可以实现头像的上传以及裁剪功能了，当然后期还要将路径添加到数据库就更完美了~~~~
（------------------------------------------------------------------------此处应有分割线----------------------------------------------------------------------）
如果你只想实现简单的图片裁剪功能，那么可以看看下面代码，此处不做注释了~~~
当然，如果上边的代码看不太明白，也可以参照下面的这个进行修改，将图片上传预览功能添加上即可哈~~~~
效果图：（对比图片就可以知道，下面这个就只是少了浏览功能，其他完全一样）
rush:js;">
<
Meta charset="UTF-8">
Click and drag on the image to select an area.
X1:Y1:X2:Y2:
以上所述是小编给大家介绍的jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
