Vue3中Canvas绘制图片后toDataURL返回空Base64问题

问题根源 #

你当前代码中，toDataURL()的调用时机不对——img.onload是异步执行的图片加载回调，但你在onMounted的同步代码里直接调用了canvas.value.toDataURL()，这时候图片还没加载完成，canvas也没执行绘制，所以拿到的是空白画布的Base64内容。

修复方案 #

把toDataURL()的调用移到img.onload回调内部，确保在canvas绘制完成后再获取数据。同时补充跨域处理和异常判断，避免潜在问题：

<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');
    if (!ctx) return; // 确保成功获取2D绘图上下文

    const img = new Image();
    // 跨域图片必须添加此属性，否则绘制后canvas会被污染，无法调用toDataURL
    img.crossOrigin = 'anonymous';
    img.src = props.imageSrc;

    img.onload = function () {
        const [x1, y1, x2, y2] = props.coordinates.split(',').map(Number);
        // 处理坐标合法性，避免出现负数宽高
        const cropWidth = Math.max(0, x2 - x1);
        const cropHeight = Math.max(0, y2 - y1);
        if (!cropWidth || !cropHeight) return;

        canvas.value!.width = cropWidth;
        canvas.value!.height = cropHeight;
        
        ctx.drawImage(img, x1, y1, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
        // 绘制完成后再获取Base64数据
        imageURL.value = canvas.value!.toDataURL();
    };

    // 处理图片加载失败的情况
    img.onerror = () => {
        console.error('图片加载失败，请检查图片地址或跨域配置');
    };
});
</script>

关键注意事项 #

• 跨域处理：如果图片来自其他域名，必须设置img.crossOrigin = 'anonymous'，同时图片服务器要配置CORS允许你的域名访问，否则canvas会被标记为“污染”，无法调用toDataURL()或getImageData()。
• 坐标合法性：要确保裁剪坐标的x2≥x1、y2≥y1，避免出现负数宽高导致绘制异常。
• 上下文校验：必须确保成功获取canvas的2D上下文，否则无法执行绘制操作。

内容的提问来源于stack exchange，提问作者Shakar Kosar