基于Jquery/cropper插件的使用。头像截切/裁剪图片。

—-》

闲来无事，学习了解一点新的东西还是可以消磨时间，非常敬业、提炼升仙。本栗针对移动页面上需要头像裁剪上传的功能。
基于Jquery库/Cropper插件 实现头像旋转、裁剪、转换canvas等功能。模仿QQ头像上传的样式，具体使用方法请参考如下实例。

使用方法：
1、引入插件需要的js、css文件即可。请jquery文件放在cropper.js前面引用。

<link rel="stylesheet" href="dist/cropper.css"/><script type="text/javascript" src="js/jquery.min.js" ></script><script type="text/javascript" src="dist/cropper.js"></script>

2、定义HTML结构：

<div class="img-container">    <img src="img/1.JPG"/></div>

3、调用插件，初始化该插件，加载HTMl结构的裁剪机制。

var $image = $('.img-container > img');var options = {modal: false,    //是否在剪裁框上显示虚线    guides: false,    //是否在容器上显示网格背景。    background: false,    //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。    dragCrop: false,    //是否允许移动剪裁框。    movable: false,    //是否允许改变剪裁框的大小。    resizable: false,    //设置剪裁容器的比例    aspectRatio: 1 / 1,    // 改变容器和图片时的事件函数    crop: function (data) {    }};$immage.cropper(options);

基本初始化插件的使用方法到这里就结束了。
更多API参考请访问如下了解，也只直接下载下方提供的DEMO参考学习，希望能帮助到你！
具体API参考访问：
http://www.htmleaf.com/jQuery/Image-Effects/201504211716.html

原Demo参考地址：
http://download.csdn.net/download/china_guanq/10019249

QQ群：595377655。问题总是能出现并着手解决的地方，欢迎加入。

---

---