用cropper插件写上传头像（可头像截图）

用cropper插件写上传头像（可头像截图）

该篇博客主要介绍以下使用cropper插件来写一个完整的上传头像功能，带头像截图以及可预览。

目录

• cropper插件
• html部分
• js部分
• 完整代码

cropper插件

这个功能主要基于cropper插件
下载cropper:github地址
直接使用npm下载

npm install cropper jquery

引入文件

<link href="路径/cropper.css" rel="stylesheet">
<script src="路径/cropper.js"><script>

html部分

<!-- 文件选择框 -->
<input id="imgPicker" type="file" accept="image/" />
<!-- 用来预览图片的img标签 -->
<img id="preview" />
<button id="btn">上传</button>

js部分

预览效果的实现：

$('#imgPicker').bind('change',function(){
   
    //当没选中图片时，清除预览
    if(this.files.length === 0){
        $('#preview').attr('src','');
        return;
    }
    //实例化一个FileReader
    var rea