cropper.js使用

       这两天一直在写上传头像那一部分，需要用到cropper裁剪，算起来这是我第二次用了，本来以为会比较顺手，结果一直报这个错。

本来以为是jq和cropper的引入顺序问题，结果调好了还在报这个错误，然后又考虑到会不会是jq和cropper的版本不对应，又知道cropper和cropper.js不一样,甚至还有一个jquery-cropper，去cropper.js官网看也不懂，看人家做出来的效果又觉得难，最后还是认真看了看别人总结翻译官网文档的博客，才知道本地引的和用cdn链接的js，对应的cropper写法完全不一样。按照别人翻译出来的效果就是很简单的样子，没有弹窗预览效果和翻转图片什么的，又觉得自己写不出来，就还是找别人写好的样式，结果又开始报上面的错，最后迫不得已，才决定自己按照别人的样式写一下，写完才觉得其实很简单，一整个麻住了，感觉自己浪费太多时间去cv别人的去去反复解决那一个报错，还是把这个经过和代码写下来提醒提醒自己，不能还没有开始做就觉得自己不能做。

	<!-- 引入css与引入js相同 -->
	<div class="changeHeadBtn">
        <!-- <input class="changeInput" type="file"/> -->
        <p class="upBtnFont"><i class="iconfont icon-banbenshengji"></i>更换头像</p>
    </div>
    <!-- 画布弹窗 -->
    <div class="box">
        <div class="cropperContent">
            <div class="cropperTop">
                <div class="seleceImgBtn">
                    <p class="upInputFont">选择图片</p>
                    <input type="file" class="cropperInput"/>
                </div>
                <p class="scloseCropper">x</p>
            </div>
            <div class="cropperCenter">
                <div class="centerLeft">
                    
                </div>
                <div class="centerRight">
                    <p>图片预览:</p>
                    <div class="small"></div> 
                    <div class="small" style="border-radius: 100%;"></div>  

                </div>
            </div>
            <div class="cropperBottom">