vue-img-cutter 实现图片裁剪[vue 组件库]

借助 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 }