借助 vue-img-cutter 可以在网页端实现图片裁剪功能,最终功能效果如下:
组件 npm 安装
npm install vue-img-cutter@2 --save-dev # for vue2
npm install vue-img-cutter@3 --save-dev # for vue3
vue-img-cutter使用
template
模板标签模块,定义了两个 div 标签,用 flex 做了水平布局,左侧区域为裁剪主区域,右侧为显示裁剪后的效果
<template>
<div>
<div style="display: flex;flex-direction: row;">
<ImgCutter v-on:cutDown="cutDownImg" :WatermarkText="''" :is-modal="false" :tool="false"
@onPrintImg="cutterPrintImg" style="padding: 10px;">
<template #cancel>
<a-button @click="() => {
isShowable = false
}">
取消
</a-button>
</template>
</ImgCutter>
<div style="margin-left: 10px ; padding: 10px;">
<div style="margin-left: 10px; padding-bottom: 20px; font-size: 18px;font-weight: bold;">
裁剪后图像
</div>
<div style="padding: 2px; background-color: rgba(0,0,0,0.1);">
<img :src="temImgPath" style="width: 100%;" />
</div>
</div>
</div>
</template>
在 demo 中,主要用到了 vue-img-cutter 组件中两个回调函数
onPrintImg
事件函数 接受实时裁剪图片;cutDown
裁剪成功后会触发的回调函数,用来处理裁剪后的图片,例如,本案例中将裁剪后图片上传至 文件服务器上
组件除了提供以上函数外,还提拱了一些其他属性以及信号槽,使用时可以根据功能需求对其进行重写
详情请参考:https://github.com/acccccccb/vue-img-cutter
<script setup>
import {
Client } from '@/utils/Client'
import {
message } from 'ant-design-vue'
import ImgCutter from 'vue-img-cutter'
import {
ref, defineProps, watch, onMounted, defineEmits }