React使用Canvas绘制证书时本地图片无法加载的问题

核心错误点 #

• 图片地址赋值错误：你代码中写的let imgUrl = {CertificateTemplate}实际生成的是一个包含CertificateTemplate属性的对象，而image.src接收的是字符串类型的图片路径，不需要给导入的变量额外包裹大括号。
• 多余的跨域配置：本地静态资源不需要设置image.crossOrigin = "Anonymous"，添加该配置后浏览器会强制校验跨域响应头，本地静态资源默认不会返回CORS头，反而会触发加载失败；外链图片因为服务端配置了跨域允许，所以加了也能正常加载。
• useEffect未指定依赖：当前的useEffect没有配置依赖数组，会在组件每次渲染时重复执行，建议补充空依赖数组让逻辑仅在组件挂载时执行一次。

修复后完整代码 #

import { useRef, useEffect } from 'react';
import CertificateTemplate from "../images/certificate-template.png";

function Canvas(){
    const canvasRef = useRef(null);

    useEffect(()=> {
        const canvas = canvasRef.current;
        if(!canvas) return; // 边界判断避免canvas未挂载时报错
        const ctx = canvas.getContext('2d');
        const image = new Image();
        image.src = CertificateTemplate; // 直接赋值导入的图片路径变量
        image.onload = function() {
            ctx.drawImage(image, 0, 0);
            ctx.font = "54px Norwester";
            ctx.fillText("Your Name", 210, 75);
        }
        image.onerror = function(err) {
            console.log("图片加载错误", err);
        };
    }, []) // 补充空依赖数组
        
    return (
        <>
            <canvas ref={canvasRef} height={1024} width={512} style={{border: '1px solid black'}}/>
        </>
    );
}

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