图片剪切工具Jcrop在JavaScript中使用

    最近接手了一个JavaScript，html，css开发的项目，需要做头像上传的功能，需要用户在页面截取图片。找了相关资料后决定用Jcrop。在使用过程中，发先网上的例子没法直接拿过来用，然后官方文档又不详细，这里记录一下使用方法。

    GitHub：https://github.com/tapmodo/Jcrop

一、使用

1.HTMl

引用以上两个文件即可，文件可从GitHub下载    

<link rel="stylesheet" href="css/jcrop.css" />
<script type="text/javascript" src="js/comm/jcrop.js"></script>

 

现有头像展示，并做点击选择图片事件：

<div id="meAvatar" class="item flexbox flex-alignc wc_material-cell">
	<label class="lbl flex1">头像</label>
	<!-- 默认图片显示 -->
	<img class="uimg wc_arr" src="img/uimg/u_chat-img14.jpg" /> 
	<!-- 系统文件选择 -->
	<input id="avatarInput