1、先安装依赖包
npm i cropperjs --save
2、在所需要使3用的页面引入
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
3、裁剪区域
data() {
return {
cropper: null,
};
},
4、canvas进行绘制
<canvas ref="canvas" width="100%" height="100%" id="img"></canvas>
<div class="cut_btn">
<el-tooltip content="取消裁剪" placement="left" v-if="cropper">
<el-button
type="danger"
size="small"
@click="cancelCropper()"
v-if="cropper"
><i class="el-icon-close"></i
></el-button>
</el-tooltip>
<el-tooltip content="确认裁剪" placement="right" v-if="cropper">
<el-button type="success" size="mini" @click="sureCropper()"
><i class="el-icon-check"></i
></el-button>
</el-tooltip>
</div>
5、方法
// imageUrl为后台提供图片地址
doDraw(href) {
// 获取canvas
var canvas = document.getElementById(