本次项目用到了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"></button>
`
}
convertBase64UrlToBlob是为了转换成blob类型,这是因为后端是通过图片流进行判断,这一步也是非常重要的,如果不进行转换后端是不接收的,如果后端也进行了文件后缀的判断,那在上传文件的时候注意加上文件后缀即可。
formData.append最写在点击上传文件按钮的函数里面,如果写在这里需要在该操作之前加上formData.delete('cover'),因为每次确定裁剪都会为formData添加一个cover且后面的不会覆盖前面的cover,这就会导致调用接口上传文件时出错。
cropper.js的功能还是很强大的,有很多属性,想要具体了解的可以查看官网,上面讲解的也很清晰。
最后总结一下,前后端的交流是很重要的,如果没有沟通可能有时候再怎么找也找不到问题出在哪儿。所以遇到问题不要闷头苦干,要多沟通交流。