点击图片时通过URL设置fabric.js canvas背景出现空白问题求助

问题核心原因 #

你写的selectCanvasEdit函数存在参数传递错误：
调用canvas.setBackgroundImage时，你传入的第一个参数是原始的photoURL字符串，而本地上传的正确实现里传入的是已经加载完成的fabric.Image实例img。当你传入URL字符串时，fabric.js会重新发起请求加载图片，如果目标图片服务存在跨域限制、未正确配置CORS头，就会导致画布污染加载失败，出现空白的情况。
同时你当前的代码存在冗余步骤：已经通过XMLHttpRequest将图片转为DataURL、且通过fabric.Image.fromURL拿到了可用的fabric图片实例，不需要再传入原始URL让框架重复加载。

修复后代码 #

//Change background using Image
export function selectCanvasEdit(photoURL) {
    // replace the map on select
    let theMap = document.getElementById('google-map')
    let theCanvas = document.getElementById('canvasContainer')

    let canH = theMap.offsetHeight
    let canW = theMap.offsetWidth

    theCanvas.style.display = ''
    theMap.style.display = 'none'

    canvas.setBackgroundColor('', canvas.renderAll.bind(canvas));
    canvas.setBackgroundImage(0, canvas.renderAll.bind(canvas));

    // 直接配置跨域参数用fabric加载即可，不需要额外转DataURL
    fabric.Image.fromURL(photoURL, function (img) {
        if (!img) return
        canvas.setHeight(canH);
        canvas.setWidth(canW);
        img.scaleToWidth(canvas.getWidth());
        // 这里第一个参数传已经加载好的img实例，不是photoURL
        canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
            scaleX: canvas.width / img.width,
            scaleY: canvas.height / img.height
        });
    }, {
        // 配置跨域参数，解决图片跨域加载问题
        crossOrigin: 'anonymous'
    });
};

额外排查点 #

如果修改后仍然加载失败，可以按如下顺序排查：

• 打开浏览器控制台，查看是否有图片跨域相关的报错
• 确认你传入的photoURL是可正常公网访问的有效地址
• 如果图片服务是你自己维护的，确保配置了正确的CORS响应头，允许你的站点跨域访问图片资源

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