cropper.js在node项目中的使用问题

        本次项目用到了crooper.js用来裁剪图片，中间也发现了很多问题。

        关于cropper.js的使用，首先就是安装导入，执行下方命令：

npm install cropperjs

         然后在html引入node_modules里面的css和js文件。

        接着需要创建一个对象（相关属性设置可查看官网）：

        inputCoverName.innerHTML=this.files[0].name;//获取图片文件
        fileFun(this)//把图片放到画布上
        cropper = new Cropper(image, {  
            aspectRatio: 16 / 9,//裁剪框的比例
            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);
            }
        });

        把图片放到画布上

function fileFun(a){
    var txt=a.files[0];
    console.log('txttxtxtxtxtxt',txt)
    var src=window.URL.createObjectURL(txt);
    centerLeft.innerHTML = `
    <img src='${src}' id='image'/>
    `
    let headImg = centerLeft.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%'
        }
    }
}

        确定裁剪（为什么转换成base64：图片的储存方式是二进制数据而不是文本，所以要将二进制的数据编码成文本格式，这样具有两种好处：不可见性，便于网络传输）：

crop.onclick = function () {
    var cas = cropper.getCroppedCanvas();
    var base64 = cas.toDataURL('image/jpeg'); // 转换为base64  
    formData.append('cover', convertBase64UrlToBlob(base64))
    console.log(convertBase64UrlToBlob(base64))
    imgCover.innerHTML=`
        <div id="viewPicBox" style="background-image: url(${base64});"/></div>
        <button id="closeViewPic" onclick="closeViewPicBox()" class="iconfont">&#xe64a;</button>
    `
}

        convertBase64UrlToBlob是为了转换成blob类型，这是因为后端是通过图片流进行判断，这一步也是非常重要的，如果不进行转换后端是不接收的，如果后端也进行了文件后缀的判断，那在上传文件的时候注意加上文件后缀即可。

        formData.append最写在点击上传文件按钮的函数里面，如果写在这里需要在该操作之前加上formData.delete('cover')，因为每次确定裁剪都会为formData添加一个cover且后面的不会覆盖前面的cover，这就会导致调用接口上传文件时出错。

        cropper.js的功能还是很强大的，有很多属性，想要具体了解的可以查看官网，上面讲解的也很清晰。

       最后总结一下，前后端的交流是很重要的，如果没有沟通可能有时候再怎么找也找不到问题出在哪儿。所以遇到问题不要闷头苦干，要多沟通交流。