开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
1.安装
npm install cropperjs
2.在main.js引入cropper的css样式（一定要加，一定要加，一定要加）
import 'cropperjs/dist/cropper.css'
3.使用
<template>
<div>
<h1>Cropper with a range of aspect ratio</h1>
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture" ref="image">
</div>
<button @click="clear">清除</button>
<div>
x:{{date.x}} <br>
y:{{date.y}} <br>
x1:{{date.x1}} <br>
y1:{{date.y1}} <br>
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs';
export default {
name: 'HomeView',
components: {},
data() {
return {
cropper: null,
date: {
x: null,
y: null,
x1: null,
y1: null,
}
}
},
mounted() {
this.init();
},
methods: {
init() {
this.cropper = new Cropper(this.$refs.image, {
autoCrop: false, //是否允许在初始化时自动裁剪图片
checkCrossOrigin: false, //检查当前图片是否为跨域图片
checkOrientation: false,
viewMode: 1, //限制裁剪框不超过图片容器的范围。
autoCropArea: 0.3, //定义裁剪区域占图片的大小(百分比)。取值为 0 - 1。
aspectRatio: 4 / 4,//裁剪器为正方形
crop: (event) => {
console.log(event.detail);
//获取裁剪框左上坐标和右下左边
//注意：它的宽度和高度都是跟着图片缩放比例进行缩放的
this.date = {
x: event.detail.x,
y: event.detail.y,
x1: event.detail.x + event.detail.width,
y1: event.detail.y + event.detail.height,
}
},
});
},
clear() {
this.cropper.clear();//清除
// this.cropper.destroy();
},
}
}
</script>
<style lang="scss" scoped>
.container {
margin: 20px auto;
max-width: 640px;
}
img {
max-width: 100%;
}
</style>
