在vue3中vue-cropper的初使用示例详解

# npm 安装
npm install vue-cropper@next -d --save

# yarn 安装
yarn add vue-cropper@next

import 'vue-cropper/dist/index.css';
import { VueCropper } from 'vue-cropper';

import VueCropper from 'vue-cropper'; 
import 'vue-cropper/dist/index.css'
const app = createApp(App)
app.use(VueCropper)
app.mount('#app')

<div style="width: 300px; height: 300px;">        
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
        >
        </vueCropper>
</div>

// 实时预览事件
const realTime = (data) => {
    previews.value = data;
};

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

//  cropper 是使用 ref 绑定到 vueCropper组将上的
const cropper = ref(null);

// 获取 base64
cropper.value.getCropData((data) => {
        console.log(data);
});

// 获取 blob
cropper.value.getCropBlob(((data ) => {
        console.log(data);
});

<!-- 图片裁剪组件
    图片剪切使用 vue-cropper 工具剪切图片，读取图片后将图片转换成Base64格式，使用 getCropData函数获取剪切后的Base64格式的图片数据，
    getCropData函数是一个异步函数，不能在 data回调中直接使用 emit钩子，需要定义Promise，并在getCropData的回调函数中调用resolve来解析Promise，
    然后等待getCropData执行完成，才会继续往下执行，再通过 emit钩子将剪切后的图片数据传递到父组件。父组件再将Base64格式图片转换成file格式，
    上传到服务器。
 -->
<template>
    <div class="custom-dialog" :model-value="dialogVisibleCorpper" @opened="openDialog" :before-close="beforeClose">
        <div class="dialog">
            <div class="container">
                <div class="cropper-container">
                    <div class="cropper-box">
                        <div class="cropper-content" ref="cropperBox">
                            <vue-cropper id="imag" ref="cropper" :img="options.img" :outputType="options.outputType"
                                :autoCropHeight="options.autoCropHeight" :autoCropWidth="options.autoCropWidth"
                                :autoCrop="options.autoCrop" :aspectRation="options.aspectRation"
                                :infoTrue="options.infoTrue" :viewMode="options.viewMode" :dragMode="options.dragMode"
                                :guides="options.guides" :initialAspectRatio="options.initialAspectRatio"
                                :background="options.background" :cropBoxMovable="options.cropBoxMovable"
                                :cropBoxResizable="options.cropBoxResizable" :fixedBox="options.fixedBox"
                                :centerBox="options.centerBox" :original="options.original"
                                :canMoveBox="options.canMoveBox" :fixedNumber="options.fixedNumber" :mode="options.mode"
                                :enlarge="options.enlarge" :fixed="options.fixed" :info="options.info"
                                :fillColor="options.fillColor" @realTime="realTime" v-if="showCropper" />
                        </div>
                    </div>
                </div>
                <div class="btn-container">
                    <div class="item-btn">
                        <el-upload action="#" :http-request="() => { }" :before-upload="beforeUpload"
                            :show-file-list="false" style="display: none;">
                            <el-button></el-button>
                        </el-upload>
                        <div class="closeDialog" @click.stop="beforeClose">取消</div>
                    </div>
                    <div class="item-btn">
                        <el-icon class="btn" @click.stop="changeScale(1)">
                            <Plus />
                        </el-icon>
                    </div>
                    <div class="item-btn">
                        <el-icon class="btn" @click.stop="changeScale(-1)">
                            <Minus />
                        </el-icon>
                    </div>
                    <div class="item-btn">
                        <el-icon class="btn" @click.stop="rotateLeft()">
                            <RefreshLeft />
                        </el-icon>
                    </div>
                    <div class="item-btn">
                        <el-button type="primary" @click.stop="determine">确 定</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getCurrentInstance, ref, reactive, onMounted } from "vue";
import 'vue-cropper/dist/index.css';
import { VueCropper } from 'vue-cropper';
const { proxy } = getCurrentInstance();
const props = defineProps({
    dialogVisibleCorpper: {
        type: Boolean,
        default: false,
    },
});
// 使用 defineEmits 来声明组件可以抛出的事件
const emit = defineEmits(["update:dialogVisibleCorpper", "getImagValue"]);
const cropper = ref(null);
const cropperBox = ref(null);
const showCropper = ref(true);
const options = reactive({
    img: null, // 裁剪图片的地址
    autoCropWidth: 300, // 默认生成截图框宽度 默认容器的 80%
    autoCropHeight: 300, // 默认生成截图框高度 默认容器的 80%
    viewMode: 1, // 0-3，控制裁剪框的显示模式
    dragMode: "none", // 图片拖动模式
    guides: false, // 是否显示裁剪框内的虚线
    background: false, // 是否显示容器的网格背景
    initialAspectRatio: 1, // 裁剪框的宽高比(可选)
    aspectRation: 1, // 裁剪框的宽高比(可选)
    cropBoxMovable: false, // 截图框是否可拖动
    cropBoxResizable: false, // 截图框是否可调整大小
    outputType: "png", // 裁剪生成图片的格式 jpeg, png, webp
    autoCrop: true, // 是否默认生成截图框 
    fixedBox: true, // 固定截图框大小 true:表示不能改变大小 false:表示可以改变大小
    canMoveBox: false, // 截图框不能拖动 true:表示可以拖动 false:表示不能拖动
    aspectRation: 1, // 裁剪框的宽高比(可选)
    fixedNumber: [1, 1], // 截图框的宽高比例
    enlarge: 1, // 图片根据截图框输出比例倍数
    fixed: true, // 是否开启截图框宽高固定比例
    centerBox: true, // 截图框是否限制在图片里(只有在自动生成截图框时才能生效)
    info: false, // 剪切框的大小信息
    original: false, // 上传图片按照原始比例渲染
    infoTrue: true, // 
    mode: "cover auto", // 图片默认渲染方式
    fillColor: "#fff", // 裁剪框的背景色
});
const previews = ref(null);
// 打开裁剪弹窗
const openDialog = () => {
    showCropper.value = true;
};
// 修改图片大小 正数为变大 负数变小
const changeScale = (num) => {
    num = num || 1;
    proxy.$refs.cropper.changeScale(num);
};
// 向左边旋转90度
const rotateLeft = () => {
    proxy.$refs.cropper.rotateLeft();
};
// 选择图片
const beforeUpload = (rawFile) => {
    if (rawFile.type.indexOf("image/") == -1) {
        ElMessage.error("请上传图片文件!");
        return false;
    }
    if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error("文件大小不能超过5MB!");
        return false;
    }
    const reader = new FileReader();
    reader.readAsDataURL(rawFile);
    reader.onload = () => {
        // 图片在这里
        options.img = reader.result;
    };
};
// 实时预览事件
const realTime = (data) => {
    previews.value = data;
};
// 关闭弹窗
const beforeClose = () => {
    options.img = null;
    previews.value = "";
    // 使用 emit 来更新父组件的 dialogVisibleCorpper 值
    emit("update:dialogVisibleCorpper", false);
};
// 提交图片
const determine = async () => {
    try {
        // getCropData是异步函数，需要定义Promise，并在getCropData的回调函数中调用resolve来解析Promise，
        // 然后等待getCropData执行完成，才会继续往下执行
        const imgBase64 = await new Promise((resolve) => {
            cropper.value.getCropData((data) => {
                resolve(data);
            });
        });
        emit("getImagValue", imgBase64);
    } catch (err) {
        ElMessage({
            message: 'err',
            type: 'error',
            plain: true,
        });
    }
    beforeClose();
};
onMounted(() => {
    // 在进入页面时，自动触发点 el-upload 的击事件
    const btn = document.querySelector(".el-button");
    if (btn) {
        btn.click();
    }
});
</script>
<style scoped>
.custom-dialog {
    width: 100%;
    height: 100vh;
    background-color: rgb(35, 35, 35);
}
.dialog {
    width: 80%;
    /* width: 100%; */
    height: 100vh;
    margin: 0 auto;
    padding: 0;
}
.container {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}
.cropper-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.btn-container {
    margin: 0 auto;
    height: 40px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 20px;
    left: 30px;
    right: 30px;
    z-index: 1000;
}
.cropper-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cropper-content {
    /* width: 100%;
    Aspect-ratio: 1/1; */
    width: 100%;
    height: 100%;
    margin: 0 auto;
    /* overflow: hidden; */
}
.closeDialog {
    color: white;
}
.btn {
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    font-weight: 700;
    color: rgb(77, 77, 77);
}
</style>