1.配置cropper
npm install vue-cropper
2.局部引入
import { VueCropper } from "vue-cropper";
3.使用html
ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="option.info" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime" @imgLoad="imgLoad" >
3.1js
data () {
return {
isShowCropper:false,
fileImgList:[],
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量（0.1-1）
full: true, // 输出原图比例截图 props名full
outputType: 'png', // 裁剪生成额图片的格式
canMove: true, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 200, // 默认生成截图框宽度
autoCropHeight: 200, // 默认生成截图框高度
fixedBox: false // 截图框固定大小
},
}
},
components: { VueCropper },
beforeAvatarUploadPS(file) {
this.option.img=URL.createObjectURL(file);
const isDWG = file.name.split('.');
const format = isDWG[isDWG.length - 1];
// uploadParams.file="";
if (format !="png" && format !="jpg") {
this.$message.error('上传文件只能是 png或jpg 格式!');
return false;
}
this.isShowCropper = true;
},
// 然后我加了几个剪切的按钮进行旋转或放大，并把上传方法一并粘贴到如下：
turnLeft() {
this.$refs.cropper.rotateLeft();
},
turnRight() {
this.$refs.cropper.rotateRight();
},
cancleCropper() {//取消截图
this.isShowCropper = false;
},
changeScale(num){
num = num || 1;
this.$refs.cropper.changeScale(num);
},
imgLoad (msg) {
console.log('imgLoad')
console.log(msg)
},
// 实时预览函数
realTime(data) {
console.log('realTime')
this.previews = data
},
onCubeImg() {//剪切上传
// 获取cropper的截图的base64 数据
this.$refs.cropper.getCropData(data => {
//先将显示图片地址清空，防止重复显示
// this.option.img = "";
//将剪裁后base64的图片转化为file格式
let file = this.convertBase64UrlToBlob(data);
// this.fileImg=URL.createObjectURL(file);
var formData = new FormData();
formData.append("file", file);
console.log(data)
});
},
// 将base64的图片转换为file文件
convertBase64UrlToBlob(urlData) {
//去掉url的头，并转换为byte
let bytes = window.atob(urlData.split(",")[1]);
//处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/jpeg" });
},
},