# 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>

// 實(shí)時(shí)預(yù)覽事件
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 工具剪切圖片，讀取圖片后將圖片轉(zhuǎn)換成Base64格式，使用 getCropData函數(shù)獲取剪切后的Base64格式的圖片數(shù)據(jù)，
    getCropData函數(shù)是一個(gè)異步函數(shù)，不能在 data回調(diào)中直接使用 emit鉤子，需要定義Promise，并在getCropData的回調(diào)函數(shù)中調(diào)用resolve來(lái)解析Promise，
    然后等待getCropData執(zhí)行完成，才會(huì)繼續(xù)往下執(zhí)行，再通過(guò) emit鉤子將剪切后的圖片數(shù)據(jù)傳遞到父組件。父組件再將Base64格式圖片轉(zhuǎn)換成file格式，
    上傳到服務(wù)器。
 -->
<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 來(lái)聲明組件可以拋出的事件
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, // 默認(rèn)生成截圖框?qū)挾?默認(rèn)容器的 80%
    autoCropHeight: 300, // 默認(rèn)生成截圖框高度 默認(rèn)容器的 80%
    viewMode: 1, // 0-3，控制裁剪框的顯示模式
    dragMode: "none", // 圖片拖動(dòng)模式
    guides: false, // 是否顯示裁剪框內(nèi)的虛線
    background: false, // 是否顯示容器的網(wǎng)格背景
    initialAspectRatio: 1, // 裁剪框的寬高比(可選)
    aspectRation: 1, // 裁剪框的寬高比(可選)
    cropBoxMovable: false, // 截圖框是否可拖動(dòng)
    cropBoxResizable: false, // 截圖框是否可調(diào)整大小
    outputType: "png", // 裁剪生成圖片的格式 jpeg, png, webp
    autoCrop: true, // 是否默認(rèn)生成截圖框 
    fixedBox: true, // 固定截圖框大小 true:表示不能改變大小 false:表示可以改變大小
    canMoveBox: false, // 截圖框不能拖動(dòng) true:表示可以拖動(dòng) false:表示不能拖動(dòng)
    aspectRation: 1, // 裁剪框的寬高比(可選)
    fixedNumber: [1, 1], // 截圖框的寬高比例
    enlarge: 1, // 圖片根據(jù)截圖框輸出比例倍數(shù)
    fixed: true, // 是否開(kāi)啟截圖框?qū)捀吖潭ū壤?
    centerBox: true, // 截圖框是否限制在圖片里(只有在自動(dòng)生成截圖框時(shí)才能生效)
    info: false, // 剪切框的大小信息
    original: false, // 上傳圖片按照原始比例渲染
    infoTrue: true, // 
    mode: "cover auto", // 圖片默認(rèn)渲染方式
    fillColor: "#fff", // 裁剪框的背景色
});
const previews = ref(null);
// 打開(kāi)裁剪彈窗
const openDialog = () => {
    showCropper.value = true;
};
// 修改圖片大小 正數(shù)為變大 負(fù)數(shù)變小
const changeScale = (num) => {
    num = num || 1;
    proxy.$refs.cropper.changeScale(num);
};
// 向左邊旋轉(zhuǎn)90度
const rotateLeft = () => {
    proxy.$refs.cropper.rotateLeft();
};
// 選擇圖片
const beforeUpload = (rawFile) => {
    if (rawFile.type.indexOf("image/") == -1) {
        ElMessage.error("請(qǐng)上傳圖片文件!");
        return false;
    }
    if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error("文件大小不能超過(guò)5MB!");
        return false;
    }
    const reader = new FileReader();
    reader.readAsDataURL(rawFile);
    reader.onload = () => {
        // 圖片在這里
        options.img = reader.result;
    };
};
// 實(shí)時(shí)預(yù)覽事件
const realTime = (data) => {
    previews.value = data;
};
// 關(guān)閉彈窗
const beforeClose = () => {
    options.img = null;
    previews.value = "";
    // 使用 emit 來(lái)更新父組件的 dialogVisibleCorpper 值
    emit("update:dialogVisibleCorpper", false);
};
// 提交圖片
const determine = async () => {
    try {
        // getCropData是異步函數(shù)，需要定義Promise，并在getCropData的回調(diào)函數(shù)中調(diào)用resolve來(lái)解析Promise，
        // 然后等待getCropData執(zhí)行完成，才會(huì)繼續(xù)往下執(zhí)行
        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(() => {
    // 在進(jìn)入頁(yè)面時(shí)，自動(dòng)觸發(fā)點(diǎn) 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>