最近接手了一个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