我试图裁剪一个图像，该图像是在请求时返回的，沿着坐标，以使用 ctx.drawImage（） 函数在指定位置裁剪图像，绘制的图像显示在DOM上，但当我试图获取画布的dateURL时，我得到一个base64图像，它是空的，不包含绘制的图像。
这是返回画布和img的组件的代码，我试图从画布的dataURL显示。

<template>
    <canvas ref="canvas" :style="{ width }"></canvas>
    <img alt="canvas image" :src="imageURL" :style="{ width }" />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const props = withDefaults(
    defineProps<{
        imageSrc: string;
        coordinates: string;
        width: string;
    }>(),
    {
        width: '120px'
    }
);

const imageURL = ref<string>('');
const canvas = ref<HTMLCanvasElement | null>(null);

onMounted(() => {
    if (!canvas.value) return;

    const ctx = canvas.value.getContext('2d');
    const img = new Image();
    img.src = props.imageSrc;

    img.onload = function () {
        const [x1, y1, x2, y2] = props.coordinates.split(',').map(Number);
        canvas.value ? (canvas.value.width = x2 - x1) : '';
        canvas.value ? (canvas.value.height = y2 - y1) : '';
        ctx?.drawImage(img, x1, y1, x2 - x1, y2 - y1, 0, 0, x2 - x1, y2 - y1);
    };

    imageURL.value = canvas.value.toDataURL();
});
</script>

字符串