vue使⽤cropperjs⽂档npm install cropperjs --save
import Cropper from "cropperjs";
-------------------------html-----------------------------------------------------
<div class="v-cropper-layer" ref="layer">
<div class="layer-header">
<button class="cancel" @click="cancelHandle" >取消</button>
<button class="centerb" @click="rotateFun">旋转</button>
<button class="confirm" @click="confirmHandle">确定</button>
</div>
<img ref="cropperImg" alt="上传头像异常" >
</div>
-
-----------------------------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"];
aspectRatio: size,
cropBoxResizable: false,
center: false,
guides: false,
cropBoxMovable: false,
autoCropArea: 0.8,
rotatable:true,
dragMode: "move",
viewMode: 1
});
},
//图⽚旋转
rotateFun(){
this.picDeg+=90
},
// 上传触发
uploadChange(e) {
var num = e.target.attributes.num.value
this.imgnum = num
let file = e.target.files[0];
box sizing
this.filename = file["name"];
let URL = window.URL || window.webkitURL;
},
// 取消上传
cancelHandle() {
this.picDeg=0
this.$refs["layer"].style.display = "none";
this.$refs["file"].value = "";
},
/
/ 确定上传
confirmHandle() {
var that = this;
let cropBox = CropBoxData();
let scale = this.initParam["scale"] || 1;
let cropCanvas = CroppedCanvas({                  width: cropBox.width * 2,
height: cropBox.height * 2
});
let imgData = DataURL();
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------------------------------------------
<style scoped>
.file {
display: none;
}
.
v-cropper-layer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
z-index: 99999; display: none;
}
.layer-header { position: fixed;
top: 0;
left: 0;
background: #1a2543; width: 100%;
height: 1rem;
/* padding: 0 0.2rem; */ z-index: 99999;
box-sizing: border-box; display: flex;
align-items:center;
}
.cancel,
.confirm,
.centerb {
line-height: 1rem;
font-size: 0.3rem; background: inherit; border: 0;
outline: 0;
color: #fff;
display:block;
width:100%;
}
.cancel{
text-align: left;
padding-left: .3rem;
}
.centerb{
text-align: center;
}
.confirm {
text-align: right;
padding-right: .3rem;
}
.cropper-img{
height: 4rem;
position: relative;
/* background: #290877; */
}
.
cropper-mask{
height: 5rem;
position: absolute;
top: 0;
left: 0;
right: 0;
background-repeat: no-repeat; background-position: center center; /* background-size: 100%; */
}
.cropper-img img{
position: absolute;
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
top: 95%;
left: 50%;
margin-left: -1.2rem;
margin-top: -.7rem;
border:3px solid #fff;
}
.cropper-img button{
position: absolute;
width: 3rem;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。