vue3+ts實現一個canvas畫筆繪圖功能，並匯出相關的切片

<template>
    <el-dialog :model-value="addDialog" width="648" @close="closeDialog" :lock-scroll="true"
        :close-on-click-modal="false">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <div :id="titleId" :class="titleClass" class="my-header-title"><span>區域性重繪</span></div>
                <p>繪製蒙版區域，AI將在蒙版區域內進行畫面重繪</p>
            </div>
        </template>
        <div class="my-content">
            <div class="my-content-menu">

                <div class="my-content-menu-item" v-for="(item, index) in btnList" :key="index"
                    :class="{ active: currentKey == item.id }" @click="changeMenu(item)">
                    <el-tooltip :visible="item.visible" placement="top" effect="light" :offset="20">
                        <template #content>
                            <div style="display: flex;flex-direction: column;gap:8px;padding:0px 8px 8px 8px;">
                                <span>畫筆大小</span>
                                <div>
                                    <Pencil @updateNum="updateNum"></Pencil>
                                </div>
                            </div>
                        </template>
                        <div style="display: flex;align-items: center;gap:8px;">
                            <SvgIcon :name="item.icon" class="my-content-menu-item-icon"></SvgIcon>
                            <span>{{ item.name }}</span>
                            <el-tooltip placement="bottom" effect="light" :offset="20">
                                <template #content>
                                    <div style="display: flex;flex-direction: column;gap:8px;padding:6px 8px 8px 8px;">
                                        <span style="font-size:14px">上傳遮罩圖片，精準控制重繪區域</span>
                                        <p style="color:#797979">白色部分為重繪區域，遮罩圖需要與原圖尺寸
                                            <br>保持一致。例如下方圖片為手指區域重繪。
                                        </p>
                                        <div style="display: flex;justify-content: space-between;">
                                            <img src="../../../../../assets/function/aipaint/shadow-source.png" />
                                            <img src="../../../../../assets/function/aipaint/shadow-pic.png" />
                                        </div>
                                    </div>
                                </template>
                                <SvgIcon name="aipaint-why" class="my-content-menu-item-icon" v-if="item.id == 2">
                                </SvgIcon>
                            </el-tooltip>
                        </div>
                    </el-tooltip>
                   
                </div>
                <input type="file" @change.self="uploadShadowPic" style="display: none" ref="shadowInput" />
            </div>
            <div class="my-content-image">
                <div class="canvascontainer">
                    <!-- <img :src="proxy.$loginUrl + props.reviewUrl" alt=""> -->
                    <canvas ref="backgroundCanvas" width="600px" height="600px"></canvas>
                    <canvas ref="drawingCanvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"
                        width="600px" height="600px"></canvas>
                    <!-- <canvas ref="resultCanvas" width="500" height="500" v-if="showResult"></canvas> -->
                </div>

            </div>
        </div>
        <div class="my-button">
            <div class="my-button-left" @click="closeDialog">取消關閉</div>
            <div class="my-button-right" @click="finishReview">完成繪製</div>
        </div>

    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted, nextTick } from 'vue';
import SvgIcon from "@/components/index.vue";
import Pencil from './pencil.vue';
const currentKey = ref(100);
import { ElMessageBox, ElMessage } from "element-plus";
const drawingCanvas: any = ref<HTMLCanvasElement | null>(null);
const backgroundCanvas: any = ref(null);
const ctx: any = ref<CanvasRenderingContext2D | null>(null);
const bgCtx: any = ref<CanvasRenderingContext2D | null>(null);
const popoverRef = ref()
const drawing = ref(false);
const color = ref('#85E822')
const size = ref(2);
const imgs: any = ref([]);
const showResult: any = ref(false);
const backFlag: any = ref(false);
const imgWidth: any = ref(0);
const imgHeight: any = ref(0);
const startX: any = ref(0);
const startY: any = ref(0);
const localUrl:any = ref('http://localhost:8888/api')
const shadowInput: any = ref(null);
import { upLoadFile } from "@/api/api";
const isDraw = ref(false)
let image = new Image();
const { proxy } = getCurrentInstance() as any;
const btnList = ref([{
    name: '撤銷',
    icon: 'aipaint-review-cancel',
    id: 0,
    visible: false,
},
{
    name: '畫筆',
    icon: 'aipaint-review-paint',
    id: 1,
    visible: false,
},
{
    name: '上傳遮罩',
    icon: 'aipaint-review-shadow',
    id: 2,
    visible: false
},
{
    name: '清除繪製',
    icon: 'aipaint-review-clear',
    id: 3,
    visible: false,
}])
const video: any = ref('');
const props = defineProps({
    addDialog: {
        type: Boolean,
        default: false,
    },
    title: {
        default: '',
        type: String
    },
    reviewUrl: {
        default: '',
        type: String
    }
});
onMounted(() => {


    // let canvas = document.getElementById("canvas");
    // canvas!.width = video.offsetWidth;
    // canvas!.height = video.offsetHeight;

})
const emit = defineEmits(["update:addDialog", 'getImgUrl']);
const closeDialog = () => {
    btnList.value.map((item) => {
        item.visible = false;
    })
    emit("update:addDialog", false);
};
const updateNum = (val: any) => {
    size.value = val / 10
}
const beforeUpload = (file: any) => {
    // 檢查檔案型別是否為JPEG或PNG
    const isJPG = ["image/jpeg", "image/png", "image/jpg"].includes(file.type);
    if (!isJPG) {
        // 如果檔案型別不是JPEG或PNG，顯示錯誤提示訊息
        ElMessage({
            message: "上傳圖片只能是JPG/png格式!",
            type: "error",
        });
    }
    // 返回檔案型別檢查結果，決定是否允許上傳
    return isJPG;
};
const uploadShadowPic = async (event: any) => {
    const file = event.target.files[0];
    if (beforeUpload(file)) {
        const data: any = await upLoadFile({ icon: file });

        console.log(data);
        if (data.status == 1) {

            const url = data.file_path;
            emit('getImgUrl', url);
            ElMessage({
                message: "上傳成功",
                type: "success",
            })
            closeDialog()
            // picMadeUrl.value = data.file_path;
        }
    }
}
// const finishReview = () => {
//     const tempCanvas = document.createElement('canvas');
//     tempCanvas.width = imgWidth.value;
//     tempCanvas.height = imgHeight.value;
//     const tempCtx = tempCanvas.getContext('2d');
//     console.log(tempCtx,'ccc')
//     const backgroundImage = new Image();
//     console.log(backgroundImage)
//     backgroundImage.src = '../../../../../assets/function/aipaint/template.png' ;
//     // backgroundImage.onload = () => {
//     //     console.log(tempCtx,'ggg')
//     //     tempCtx!.drawImage(backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height, 0, 0, imgWidth.value, imgHeight.value);
//     // }
//     tempCtx!.drawImage(backgroundImage, startX.value, startY.value, imgWidth.value, imgHeight.value);
//     // tempCtx!.drawImage(canvas.value,  0, 0, canvas.value?.width || 0, canvas.value?.height || 0);

// tempCtx!.drawImage(canvas.value, startX.value, startY.value, imgWidth.value, imgHeight.value, 0, 0, imgWidth.value, imgHeight.value);
//     const dataURL = tempCanvas.toDataURL('image/png');
//     const url = getBase64Url(dataURL)
//     
//     // closeDialog()
// }
const finishReview = () => {
    const bgCanvas = backgroundCanvas.value;

    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = bgCanvas.width;
    finalCanvas.height = bgCanvas.height;
    const finalCtx = finalCanvas.getContext('2d');

    // 繪製背景
    // finalCtx!.drawImage(bgCanvas, 0, 0);
    // 繪製使用者繪製的內容
    finalCtx!.fillStyle = 'black';
    finalCtx!.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
    finalCtx!.drawImage(drawingCanvas.value, startX.value, startY.value, imgWidth.value, imgHeight.value);

    // 儲存最終結果
    const dataURL = finalCanvas.toDataURL('image/png');
    const file = base64ToFile(dataURL, 'drawing.png');
    console.log(dataURL)
    uploadFiles(file);
    clearCanvas()
    // const url = getBase64Url(dataURL);
    // console.log(url)

    // emit('getImgUrl', url)

}
const uploadFiles = async (file: any) => {
    // beforeFileUpload

    const data: any = await upLoadFile({ icon: file });
    if (data.status == 1) {
        const url = data.file_path;
        emit('getImgUrl', url);
        closeDialog()
    }
    // if (beforeUpload(file)) {
    //     const data: any = await upLoadFile({ icon: file });

    //     console.log(data);
    //     if (data.status == 1) {
    //         reviewUrl.value = data.file_path;
    //         reWriteRef.value.initData(reviewUrl.value);
    //         showRewrite.value = true;
    //     }
    // }
};
function base64ToFile(base64: any, fileName: any) {
    // 將base64按照 , 進行分割 將字首  與後續內容分隔開
    let data = base64.split(',');
    // 利用正規表示式 從字首中獲取圖片的型別資訊（image/png、image/jpeg、image/webp等）
    let type = data[0].match(/:(.*?);/)[1];
    // 從圖片的型別資訊中 獲取具體的檔案格式字尾（png、jpeg、webp）
    let suffix = type.split('/')[1];
    // 使用atob()對base64資料進行解碼  結果是一個檔案資料流 以字串的格式輸出
    const bstr = window.atob(data[1]);
    // 獲取解碼結果字串的長度
    let n = bstr.length
    // 根據解碼結果字串的長度建立一個等長的整形數字陣列
    // 但在建立時 所有元素初始值都為 0
    const u8arr = new Uint8Array(n)
    // 將整形陣列的每個元素填充為解碼結果字串對應位置字元的UTF-16 編碼單元
    while (n--) {
        // charCodeAt()：獲取給定索引處字元對應的 UTF-16 程式碼單元
        u8arr[n] = bstr.charCodeAt(n)
    }
    // 利用建構函式建立File檔案物件
    // new File(bits, name, options)
    const file = new File([u8arr], `${fileName}.${suffix}`, {
        type: type
    })
    // 將File檔案物件返回給方法的呼叫者
    return file;
}

const getBase64Url = (pic: any) => {
    const blob = base64ImgtoFile(pic)
    const blobUrl = window.URL.createObjectURL(blob);
    console.log(blobUrl)
    return blobUrl

}
function base64ImgtoFile(dataurl: any, filename = 'file') {
    //將base64格式分割：['data:image/png;base64','XXXX']
    const arr = dataurl.split(',')
    // .*？ 表示匹配任意字元到下一個符合條件的字元 剛好匹配到：
    // image/png
    const mime = arr[0].match(/:(.*?);/)[1]  //image/png
    //[image,png] 獲取圖片型別字尾
    const suffix = mime.split('/')[1] //png
    const bstr = atob(arr[1])   //atob() 方法用於解碼使用 base-64 編碼的字串
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
    })
}
const changeMenu = (item: any) => {
    if (item.id == 1 || item.id == 2) {
        currentKey.value = item.id
    }
    if (item.id == 3) {
        clearCanvas()
        initData(props.reviewUrl)
    }
    if (item.id == 1) {
        // drawing.value = true;
        isDraw.value = true;

        item.visible = true;
    } else {
        btnList.value.map((item) => {
            item.visible = false;
        })
    }
    if (item.id == 0) {
        isDraw.value = false;
        currentKey.value = 100;

        undo()
    } else if (item.id == 2) {
        console.log('xxxx')
        shadowInput.value.click();
    }
}
const initData = (val: any) => {


    nextTick(() => {
        console.log(proxy.$loginUrl + val)
        if (backgroundCanvas.value) {
            bgCtx.value = backgroundCanvas.value.getContext('2d');

            image.src = proxy.$loginUrl + val;
            console.log(image)
            image.onload = () => {

                if (image.width < image.height) {
                    imgWidth.value = image.width * (backgroundCanvas.value!.height / image.height);
                    imgHeight.value = image.height * (backgroundCanvas.value!.height / image.height);
                } else {
                    imgWidth.value = image.width * (backgroundCanvas.value!.width / image.width);
                    imgHeight.value = image.height * (backgroundCanvas.value!.width / image.width);
                }


                startX.value = (backgroundCanvas.value!.width - imgWidth.value) / 2;
                startY.value = (backgroundCanvas.value!.height - imgHeight.value) / 2;
                // canvas.value!.width = imgWidth;
                // canvas.value!.height = imgHeight;
                bgCtx.value!.drawImage(image, startX.value, startY.value, imgWidth.value, imgHeight.value);
            };
        }

    })
}
const startDrawing = (event: MouseEvent) => {
    ctx.value = drawingCanvas.value.getContext('2d');
    ctx.value.fillStyle = 'white';

    if (isDraw.value) {
        drawing.value = true;
        backFlag.value = true;
        ctx.value!.beginPath();
        ctx.value!.moveTo(event.offsetX, event.offsetY);
        let obj = ctx.value!.getImageData(0, 0, drawingCanvas.value!.width, drawingCanvas.value!.height);
        imgs.value.push(obj)
    }




};

const undo = () => {
    if (backFlag.value) {
        let img = imgs.value.pop()
        ctx.value!.putImageData(img, 0, 0);
        // 撤銷按鈕的樣式
        if (imgs.value.length > 0) {

            backFlag.value = true
        } else {

            backFlag.value = false
        }
    }


};
const draw = (event: MouseEvent) => {
    if (!drawing.value) return;

    ctx.value!.lineWidth = size.value;
    // ctx.value!.strokeStyle = color.value;
    ctx.value!.strokeStyle = '#FFFFFF';
    ctx.value!.lineTo(event.offsetX, event.offsetY);
    ctx.value!.stroke();
};

const stopDrawing = () => {
    drawing.value = false;
    ctx.value!.closePath();

};

const clearCanvas = () => {
    ctx.value!.clearRect(0, 0, drawingCanvas.value!.width, drawingCanvas.value!.height)
    bgCtx.value.clearRect(0, 0, backgroundCanvas.value!.width, backgroundCanvas.value!.height)
}
defineExpose({
    initData,

})

</script>
<style lang="scss">
.el-text {
    width: 100%;
    max-width: 928px;
    // min-width: 800px;
    // min-height: 24px;
    // margin-left: 64px;
    border: none !important;
    --el-input-border-color: none !important;
    --el-input-focus-border: none !important;
    --el-input-border: none !important;
    --el-input-focus-border-color: none !important;
    --el-input-hover-border-color: none !important;
    --el-input-clear-hover-color: none !important;
    border-radius: 0px 0px 8px 8px;

    .el-textarea__inner {
        // height: auto !important;
        // min-height: 24px !important;
        font-size: 14px;
        padding: 8px 8px 8px 8px;

        min-height: 240px !important;
        // max-height: 150px !important;
        line-height: 24px;
        background-color: rgba(0, 0, 0, 0.03);
        // line-height: 56px !important;
        border: none;
        border: 1px solid rgba(0, 0, 0, 0.01);
        border-radius: 8px;
        // border-radius: 8px;
    }
}
</style>
<style lang="scss" scoped>
.canvascontainer {
    max-width: 600px;
    max-height: 600px;
    position: relative;

}

canvas {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    display: block;
}

.my-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    // justify-content: space-between;
    gap: 24px;
    padding: 0px 0px 12px 0px;
    margin-left: 12px;
    border-bottom: 1px solid #eee;

    &-title {
        font-size: 14px;
        color: #1f1f1f;
        position: relative;
        display: flex;

        font-size: 20px;


        span {
            position: relative;
            z-index: 100;

        }

    }

    &-title:after {
        content: "";
        position: absolute;
        bottom: 0px;
        width: 100%;
        left: 0px;
        height: 8px;
        background: linear-gradient(to right,
                rgba(133, 232, 34, 1),
                rgba(133, 232, 34, 0));
    }

    p {
        color: #797979;
        font-size: 14px;
    }
}

.my-content {
    // display: flex;
    // gap: 16px;
    padding: 0px 10px;

    &-menu {
        display: flex;
        gap: 16px;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        &-item {
            width: 25%;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            background-color: rgba(0, 0, 0, 0.03);
            font-size: 14px;
            border-radius: 4px;
            color: #4c4c4c;
            cursor: pointer;

            &-icon {
                width: 16px;
                height: 16px;
                // color:#4c4c4c;
            }
        }

        &-item:hover {
            background-color: rgba(133, 232, 34, 0.1);
            color: #65C115;

        }

        .active {
            background-color: rgba(133, 232, 34, 0.1);
            color: #65C115;
        }
    }

    &-image {
        width: 100%;
        height: 600px;
        margin-top: 16px;
        border: 1px solid #eee;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;

        &-canvas {
            max-width: 600px;
            max-height: 600px;

        }




    }
}

.my-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 16px 0px 0px 0px;
    gap: 16px;
    font-size: 14px;
    color: #1f1f1f;

    &-left {
        // width:
        background-color: #F2F3F6;
        border-radius: 4px;
        width: 288px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }

    &-right {
        background-color: #85E822;
        border-radius: 4px;
        width: 288px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        cursor: pointer;
    }
}
</style>