安装
npm install --save vue-cropper
封装组件
<template>
<vueCropper height="562px"
ref="cropper" :img="imgUrl"
:outputSize="option.size"
:outputType="option.outputType"
:info="true" :guides="true"
:high='option.high' :fixed="true"
:full="option.full" :canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
:fixedNumber="option.fixedNumber"
:maxImgSize="option.maxImgSize"
@realTime="realTime" :infoTrue="option.infoTrue"
@imgLoad="imgLoad">
</vueCropper>
</template>
<script>
// 引入组件
import { VueCropper } from "vue-cropper";
export default {
components: {
VueCropper
},
props: {
imgUrl: {
type: String,
required: true
}
},
data() {
return {
option: {
img: "",
size: 1,
full: true,
outputType: "png",
canMove: false,
original: false,
canMoveBox: true,
autoCrop: true,
high: true,
autoCropWidth: 252,
autoCropHeight: 140,
fixedBox: false,
infoTrue: false,
downImg: "#",
fixed: true,
fixedNumber: [16, 9],
maxImgSize: 3000 // 图片最大像素
}
};
},
methods: {
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
rotateRight() {
this.$refs.cropper.rotateRight();
},
finish(type) {
// 输出
var test = window.open("about:blank");
test.document.body.innerHTML = "图片生成中..";
if (type === "blob") {
this.$refs.cropper.getCropBlob(data => {
var img = window.URL.createObjectURL(data);
this.model = true;
this.modelSrc = img;
});
} else {
this.$refs.cropper.getCropData(data => {
this.model = true;
this.modelSrc = data;
});
}
},
realTime(data) {
// 实时预览函数
let imgAxis = this.$refs.cropper.getImgAxis();
let cropAxis = this.$refs.cropper.getCropAxis();
let cropImgX = cropAxis.x1 - imgAxis.x1;
let cropImgY = cropAxis.y1 - imgAxis.y1;
data.x = cropImgX;
data.y = cropImgY;
// 把数据返给父组件
this.$emit("getPreview", data);
},
down(type) {
// event.preventDefault()
var aLink = document.createElement("a");
aLink.download = "author-img"; // 输出
if (type === "blob") {
this.$refs.cropper.getCropBlob(data => {
console.log(data);
this.downImg = window.URL.createObjectURL(data);
// aLink.download = this.downImg;
console.log(this.downImg);
aLink.href = window.URL.createObjectURL(data);
aLink.click();
});
} else {
this.$refs.cropper.getCropData(data => {
this.downImg = data;
aLink.href = data;
aLink.click();
});
}
},
uploadImg(e, num) {
// 上传图片;
// this.option.img;
var file = e.target.files[0];
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
return false;
}
var reader = new FileReader();
reader.onload = e => {
let data;
if (typeof e.target.result === "object") {
// 把Array Buffer转化为blob 如果是base64不需要;
data = window.URL.createObjectURL(new Blob([e.target.result]));
} else {
data = e.target.result;
}
if (num === 1) {
this.option.img = data;
} else if (num === 2) {
this.example2.img = data;
}
}; // 转化为base64;
reader.readAsDataURL(file); // 转化为blob reader.readAsArrayBuffer(file)
},
imgLoad(msg) {
console.log(msg);
}
}
};
</script>
<style scoped>
</style>
使用封装的组件
截图框
<cropImg :imgUrl="option.img" @getPreview="getPreview" />
预览框
<div class="preview">
<img :src="previews.url" :style="previews.img">
</div>
效果图
截图框 预览框
效果可以实现了,但是不满足业务需求
现在的效果是预览框图片的大小是由截图框的大小决定的
而现实的业务需求是不管截图框再小,哪怕10 * 10,也要求能够占满预览框400 * 200
经过与组件作者沟通,组件不能 实现此类需求
解决方案:
一、将图片转换为base64,根据坐标计算,生成一张新的图片填充到预览框中,效果可以实现,但是预览框图片卡顿非常明 显, 用户体验不好
二、实现思路,根据预览框与截图框的比例重新计算,图片大小、坐标以及截图框大小
if (data.w < 400) {
// 截取图片宽度
let h = parseFloat(data.img.height);
let w = parseFloat(data.img.width);
// 截图框大小
let previewWidth = data.w;
let previewHeight = data.h;
// 起始点坐标
let x = data.x;
let y = data.y;
// 处理截图框坐标超出图片的情况
if (x < 0) {
x = 0;
}
if (y < 0) {
y = 0;
}
// 获取scale
let transRatio = parseFloat(data.img.transform.substring(6, 13));
// 放大比例 400是预览框宽
let ratio = 400 / data.w;
// y放大比例 225是预览框高 225是根据截图框宽高比计算的
let inversey = 225 / data.h;
// 拿到transform
let trans = data.img.transform;
let transx = parseFloat(trans.substr(trans.indexOf("-") + 1, 8));
let transy = parseFloat(trans.substr(trans.lastIndexOf("-") + 1, 8));
// 重新赋值
data.img.height = ratio * h + "px";
data.img.width = ratio * w + "px";
data.x = ratio * x;
data.y = ratio * y;
data.img.transform = "scale(" + transRatio + ", " + transRatio + ") translate3d(-" + transx * ratio + "px, -" + transy * ratio + "px, 0px) rotateZ(0deg)";
// 截图框大小
data.w = previewWidth * ratio;
data.h = previewHeight * inversey;
}
经过计算之后,效果图如下
截图框 预览框
左侧 135 * 76 右侧 400 * 225
拖动截图框,页面很流畅,没有卡顿
实现方法,已经贡献给作者,在vue-cropper 0.4.5版本中已经可以实现此功能
三、图片跨域问题,需要后端配合,设置服务器 access-control-allow-origin: *
四、发现截图坐标误差问题,后经排查发现是,组件默认图片大小不能超过2000像素,根据业务需求改为3000像素