关键:获取缩放比例
this.scale=data.img.transform.substring(6,11)
1.开启实时预览更新
<vueCropper id="vuecropper" ref="cropper" :img="option.img" @realTime="realTime" ></vueCropper>
2.计算坐标点
<script>
export default {
methods:{
realTime (data) { // 实时预览
this.previews = data
this.scale=data.img.transform.substring(6,11) //关键参数
},
endCropper(){
var ratio=Number(this.scale)
//获取截图框基于容器的坐标点
var crop_position=this.$refs.cropper.getCropAxis()
//获取图片基于容器的坐标点
var img_position=this.$refs.cropper.getImgAxis()
//计算截图框基于图片的坐标
var position=[]
var x1=(crop_position.x1-img_position.x1)/ratio
var y1=(crop_position.y1-img_position.y1)/ratio
var x2=(crop_position.x2-img_position.x1)/ratio
var y2=y1+this.$refs.cropper.cropH/ratio
}
}
}
</script>