基于cropper.js封装vue实现在线图片裁剪组件功能
|
效果图如下所示， cropper.js
cropper.js 安装
clone下载： git clone 引用cropper.js主要引用cropper.js跟cropper.css两个文件 注意：必须先引入jquery文件，才能使用cropper.js插件 简单使用构建截图所要用到的div容器
添加容器的样式，让img填充满整个容器（很重要） 调用cropper.js方法，初始化截图控件 其他详细api请参考： 封装成vue组件封装成vue组件中需解决的问题
模拟input框点击选择图片并对选择的图片进行格式、大小限制 重新选择图片裁剪 确认裁剪并获取base64格式的图片信息
非父子组件之间的通信问题 模拟input框点击选择图片并对选择的图片进行格式、大小限制构建一个隐藏的input标签，然后模拟点击此input，从而达到能选择图片的功能 给input绑定一个监听内容变化的方法，拿到上传的文件，并进行格式、大小校验 5242880) {
_this.$Modal.error({
title: '超出限制',content: '您选择的图片过大，请选择5MB以内的图片！'
});
return;
}
var reader = new FileReader();
// 将图片将转成 base64 格式
reader.readAsDataURL(_this.file);
reader.onload = function () {
_this.imgCropperData.imgSrc = this.result;
_this.initCropper();
}
}
重新选择图片裁剪当第一次选择图片之后，肯定会面临需要重选图片的问题，那么就会面临如何替换掉裁剪框中的图片，上面的步骤选择了图片后通过方法拿到了图片的主要信息，现在就需要重新构建裁剪框就可以解决问题了，查看cropper.js给出的，发现官方是使用动态添加裁剪容器的方法，进行操作的，这里我们仿照官方进行实现。 }
}); } 确认裁剪并获取base64格式的图片信息构造用于上传的数据 {
const byteCharacters = atob(b64Data);
const byteArrays = [];
for(let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset,offset + sliceSize);
const byteNumbers = new Array(slice.length);
for(let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays,{
type: contentType
});
return blob;
}
const contentType = 'image/jepg';
const b64Data2 = photoType;
const blob = b64toBlob(b64Data2,contentType);
formData.append("file",blob,"client-camera-photo.png")
formData.append("type",_this.imgType)
非父子组件之间的通信问题
这里我们使用eventBus进行组件之间的通信步骤1.声明一个bus组件用于B组件把参数传递给A组件 2.在A组件中引用bus组件，并实时监听其参数变化 {
var _this = this;
console.log(imgToken);
...
});
}
}
3.B组件中同样引用bus组件，来把参数传给A组件 参考：
vue选图截图插件完整代码BY-LucaLJX 总结以上所述是小编给大家介绍的基于cropper.js封装vue实现在线图片裁剪组件功能。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |