Cropper.js是一个功能强大的图像裁剪库,可以在Vue项目中实现图像裁剪的功能。
效果演示
安装
要使用vue-cropperjs,首先在你的Vue项目中安装它。你可以使用npm或yarn来安装:
npm install vue-cropperjs
导入cropper库
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
使用
使用new Cropper
创建一个 cropper 实例,对图片进行裁剪。
其中options可以设置参数。以下是各参数的含义:
viewMode
:设置裁剪视图模式,1 表示方形裁剪,2 表示比例裁剪,3 表示填充裁剪。
dragNode
:设置裁剪区域的拖动方式,可以是"move"、“resize"或"both”。
initialAspectRatio
:设置初始比例,即裁剪区域的宽度和高度之比。
aspectRatio
:设置裁剪区域的比例,即裁剪区域的宽度和高度之比。
preview
:设置预览区域的元素选择器,用于显示裁剪后的图片。
background
:设置是否在裁剪区域背后填充背景色。
autoCropArea
:设置自动裁剪区域的大小。
zoomOnWheel
:设置是否在鼠标滚轮上下滚动时进行缩放。
代码示例
<template>
<el-dialog v-model="visible" title="截取图片" :close-on-click-modal="false" :close-on-press-escape="false" width="400px" destroy-on-close>
<div>
<div class="container">
<img :src="image" ref="image" />
</div>
<el-text>预览</el-text>
<div class="preview"></div>
</div>
<template v-slot:footer>
<el-button @click="visible = false">{{ $t("cancel") }}</el-button>
<el-button type="primary" @click="save">裁剪</el-button>
</template>
</el-dialog>
</template>
<script>
import Cropper from "cropperjs";
import "cropperjs/dist/cropper.css";
export default {
props: {
image: String // 将需要裁剪的图片传进来
},
data() {
return {
editor: null,
visible: false
};
},
methods: {
// 初始化 Cropper 编辑器
init() {
this.editor = new Cropper(this.$refs.image, {
viewMode: 1, // 设置视图模式为限制在裁剪框内
dragMode: "none", // 禁止拖拽
initialAspectRatio: 1, // 初始裁剪框宽高比
aspectRatio: 1, // 裁剪框宽高比
preview: ".preview", // 预览窗口选择器
background: false, // 不显示裁剪框背景
autoCropArea: 0.7, // 自动选择裁剪区域的大小
zoomOnWheel: false // 禁用滚轮缩放
});
},
// 保存裁剪结果
save() {
const croppedImage = this.editor
.getCroppedCanvas({
imageSmoothingQuality: "high" // 设置图像平滑处理质量为高
})
.toDataURL("image/png"); // 将结果转为PNG格式的data URL,存储为png可以防止透明度丢失
this.$emit("finishEdit", croppedImage); // 发送裁剪结果给父组件
this.visible = false;
}
}
};
</script>
<style scoped>
.preview {
margin: 10px auto;
width: 100%;
height: 150px;
overflow: hidden;
border: 1px solid red;
}
.container {
width: 100%;
height: 200px;
overflow: hidden;
}
</style>