如何将来自 URL（具有不同来源）的图像加载到 File 对象中？

Posted 2023-03-22

【中文标题】如何将来自 URL（具有不同来源）的图像加载到 File 对象中？

【英文标题】：How do I load an image from an URL (that has a different origin) into a File object?

【发布时间】：2021-11-12 10:42:09

【问题描述】：

起初我认为它应该像这样简单：

const img = document.createElement('img');
img.onload = () =>  ... 
img.onerror = () =>  ... 
img.src = url;

但后来发现我需要在画布上绘制它，然后是toBlob()。不要忘记将 CORS 和 crossorigin="anonymous" 添加到 img 标记中。是不是有点太牵扯了？有没有更好的办法？

向您展示最终解决方案（您需要 CORS 标头）：

function getFileFromURL(url) 
    return new Promise((resolve, reject) => 
        const fileName = url.split('/').pop();
        const img = document.createElement('img');
        img.setAttribute('crossorigin', 'anonymous');
        img.onload = () => 
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            canvas.toBlob(blob => 
                resolve(new File([blob], fileName));
            );
        ;
        img.onerror = () => 
            reject('something went wrong');
        ;
        img.src = url;
    )

【问题讨论】：

好吧，您可以使用 AJAX 请求实际的图像数据……但是您将无法再使用crossorigin="anonymous"，此时远程方必须积极支持正确的 CORS。跨度>

如果您只是想显示图像，cors 应该不是问题，但是如果您尝试访问图像的数据，例如扫描像素等。您有示例吗？

@CBroe 使用我的解决方案，我还需要添加 CORS。没有它们就行不通。

@Skarlinski 我需要访问数据。

"有更好的方法吗？"是的，它叫Code Review Stack Exchange。

【参考方案1】：

CBroe 建议的解决方案可以说更好：

function getFileFromURL(url) 
    const fileName = url.split('/').pop();
    return fetch(url)
        .then(response => 
            return new File([response.data], fileName);
        );

确保将 CORS 标头添加到请求中。