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">
                <div class="manBtn">
                    <div class="resetBtn bottomBtn">复位</div>
                    <div class="rotateBtn bottomBtn">旋转</div>
                    <div class="huanXiangBtn bottomBtn">换向</div>
                </div>
                <div class="crop bottomBtn">确定</div>
            </div>
        </div>

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

css

.changeHeadBtn {
            width: 170px;
            height: 45px;
            background-color: #ff7e88;
            color: white;
            position: relative;
            margin: 0 auto;
            letter-spacing: 1px;
            line-height: 45px;
            margin-top: 20px;
        }
        .changeHeadBtn > p{
            display: inline-block;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            margin: 0px;
            text-align: center;
        }
        
        .box {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }
        .box .cropperContent {
            display: flex;
            flex-direction: column;
            width: 700px;
            height: 600px;
            background-color: white;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 20px;
            padding: 20px;
        }
        .box .cropperContent .cropperTop {
            display: flex;
            justify-content: space-between;
        }
        .box .cropperContent .cropperTop .seleceImgBtn {
            width: 110px;
            height: 40px;
            background-color: #ff7782;
            outline-color: white;
            position: relative;
            text-align: center;
        }
        .box .cropperContent .cropperTop .seleceImgBtn .upInputFont {
            text-decoration: none;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            color: white;
            text-align: center;
            position: relative;
            top: 10px;
        }
        .box .cropperContent .cropperTop .seleceImgBtn .cropperInput {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            cursor: pointer;
            display: inline-block;
            z-index: 99;
            opacity: 0;
        }
        .box .cropperContent .cropperTop .scloseCropper {
            font-size: 20px;
            margin-right: 10px;
            margin-bottom: 5px;
            color: #777777;
            cursor: pointer;
        }
        .box .cropperContent .cropperCenter {
            flex: 1;
            display: flex;
            margin: 20px 0px;
        }
        .box .cropperContent .cropperCenter .centerLeft {
            flex: 1;
            border: solid 1px #8a8a8a;
            margin-right: 20px;
            width: 440px;
            height: 430px;
        }
        .box .cropperContent .cropperCenter .centerLeft > img {
            
        }
        .box .cropperContent .cropperCenter .centerRight {
            color: #777777;
        }
        .box .cropperContent .cropperCenter .centerRight p {
            display: inline-block;
        }
        .box .cropperContent .cropperCenter .centerRight .small {
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .box .cropperContent .cropperCenter .centerRight .smallRound {
            width: 200px;
            height: 200px;
            overflow: hidden;
            border-radius: 100%;
        }
        .box .cropperContent .cropperBottom {
            display: flex;
            justify-content: space-between;
            padding: 10px 0px;
        }
        .bottomBtn {
            display: inline-block;
            width: 60px;
            height: 30px;
            line-height: 30px;
            margin-right: 10px;
            text-align: center;
            background-color: #ff7782;
            cursor: pointer;
            color: white;
        }

js

 //点击修改头像要出来画布
        $('.upBtnFont')[0].onclick = function(){
            $('.box')[0].style.display = 'block'

        }
        var cropper = null

        $('.cropperInput')[0].onchange = function(){
            fileToBase64(this)//把图片放到画布上
            // 使用cdn引入Js
            cropper = new Cropper(image, {  
                aspectRatio: 1 / 1,//裁剪框的比例
                viewMode:1,//图片跟背景布的位置关系
                preview:'.small',//生成预览图的效果地方
                guides:false,//取消裁剪框上的虚线
                crop: function (e) {//裁剪过程执行的函数
                    
                    // console.log(e.detail.x);
                    // console.log(e.detail.y);
                    // console.log(e.detail.width);
                    // console.log(e.detail.height);
                    // console.log(e.detail.rotate);
                    // console.log(e.detail.scaleX);
                    // console.log(e.detail.scaleY);
                }
            });
            // 引入本地js的时候，用这个：
            // $("#image").cropper({
            //     aspectRatio: 1/1,
            //     viewMode: 1,
            //     minCropBoxWidth: 100,
            //     preview: '.small',
            //     preview:$('.smallRound')[0]
            // });
        }




        //将file转为base64，为了让选择的图片显示在画布上
        function fileToBase64(a){
            var txt=a.files[0];
                formData = new FormData()
            formData.append('img[]',txt);
            var src=window.URL.createObjectURL(txt);
            $('.centerLeft')[0].innerHTML = `
            <img src='${src}' id='image'/>
            `
        	let headImg = $('.centerLeft')[0].children[0]
		    //图片加载完之后
		    headImg.onload = function(){
		        let imgWidth = headImg.offsetWidth
		        let imgHeight = headImg.offsetHeight
		        if(imgWidth > imgHeight){
		            headImg.style.width = '100%'
		            headImg.style.height = 'auto'
		        }else{
		            headImg.style.width = 'auto'
		            headImg.style.height = '100%'
		        }
		    }
        }

        //复位按钮
        $('.resetBtn')[0].onclick = function(){
            if(ifInput()){
                cropper.reset()
            }
        }
        //旋转按钮
        $('.rotateBtn')[0].onclick = function(){
            if(ifInput()){
                cropper.rotate(90)
            }
        }
        //换向按钮
        var scale = true
        $('.huanXiangBtn')[0].onclick = function(){
            if(ifInput()){
                if(scale){
                    cropper.scale(-1,1)
                    scale = false
                }else{
                    cropper.scale(1,1)
                    scale = true
                }
            }
        }
        //判断有没有选择图片
        function ifInput(){
            if($('.cropperInput')[0].files[0]) return true
            else return false
        }
        //确定裁剪
        $('.crop')[0].onclick = function(){
            if(ifInput()){
                cropper.getCroppedCanvas().toBlob(b => {
                	console.log(b)//b是生成的blob类型的数据
		            var formData = new FormData()
		            // formData.append('multipartFile',b);  如果不做处理
		            formData.append('multipartFile',b,'temp.jpg');//封装formData,传给接口
		        })
                
            }
        }

实例化Cropper接收的参数有很多，基本上是对画布的处理，这篇博客写得很详细：https://blog.csdn.net/weixin_38023551/article/details/78792400
cropper的cdn链接：https://cdnjs.com/libraries/cropperjs
下载cropper的地址：https://github.com/fengyuanchen/cropperjs/tree/main/docs

结束结束。
两天啥也没干，净解决这个cropper is not a function。嗐！！！