基于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.youkuaiyun.com/download/china_guanq/10019249

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

---