**
安装依赖包:
**
1、截图插件
npm i vue-cropperjs -S
2、html转canvas插件
npm i html2canvas -S
截图插件引入main.js
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';
app.component(VueCropper); // vue3.0
Vue.component(VueCropper); // vue2.0 二者取其一
<template>
<div class="box">
<vue-cropper
v-if="true"
ref="cropper"
:src="imgSrc"
alt="Source Image"
@crop="crop"
:zoomable="false"
:viewMode=3
preview=".small"
>
</vue-cropper>
</div>
<div class="small"></div>
<div>
<button @click="save">save</button>
</div>
</template>
<script>
import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css";
export default {
components: {
vueCropper: VueCropper,
},
data() {
return {
imgSrc:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640335154&t=4eb5e4d59ed56ccb31d8caedf329a6db",
};
},
methods: {
crop(e) {
e = e || window.event;
console.log(e.detail);
console.log(e.detail);
},
save() {
// 通过获取.small元素,使用html2canvas来转化成图片上传给后端
}
},
};
</script>
<style lang="scss" scoped>
.box {
width: 800px;
height: 500px;
margin: 0 auto;
}
.small {
width: 200px;
height: 200px;
overflow: hidden;
}
</style>