vue 使用 cropperjs 文档
npm install cropperjs --save
import Cropper from "cropperjs";
-------------------------html-----------------------------------------------------
------------------------------export default----------------------------------
data() {
return {
cropper: {},
filename: "",
initParam: {
fileType: 'recruit', // 其他上传参数
uploadURL: '', // 上传地址
scale: 1 // 相对手机屏幕放大的倍数: 4倍
},
IsCropper:false,
picDeg:0,//裁剪旋转角度
}
},
mounted() {
var size = 16/10
this.init(size);
},
methods:{
// 初始化裁剪插件
init(size) {
let cropperImg = this.$refs["cropperImg"];
this.cropper = new Cropper(cropperImg, {
aspectRatio: size,
cropBoxResizable: false,
center: false,
guides: false,
cropBoxMovable: false,
autoCropArea: 0.8,
rotatable:true,
dragMode: "move",
viewMode: 1
});
},
//图片旋转
rotateFun(){
this.picDeg+=90
this.cropper.rotateTo(this.picDeg);
},
// 上传触发
uploadChange(e) {
var num = e.target.attributes.num.value
this.imgnum = num
let file = e.target.files[0];
this.filename = file["name"];
let URL = window.URL || window.webkitURL;
this.cropper.replace(URL.createObjectURL(file));
this.$refs["layer"].style.display = "block";
},
// 取消上传
cancelHandle() {
this.picDeg=0
this.cropper.reset();
this.$refs["layer"].style.display = "none";
this.$refs["file"].value = "";
},
// 确定上传
confirmHandle() {
var that = this;
let cropBox = this.cropper.getCropBoxData();
let scale = this.initParam["scale"] || 1;
let cropCanvas = this.cropper.getCroppedCanvas({
width: cropBox.width * 2,
height: cropBox.height * 2
});
let imgData = cropCanvas.toDataURL();
let formData = new FormData();
formData.append("token", this.GLOBAL.appToken);
formData.append("version", this.GLOBAL.version);
formData.append("os", this.GLOBAL.os);
formData.append("file", imgData);
//console.log(imgData)
that.cancelHandle();
this.picDeg=0
},
}
-----------------style------------------------------------------