Question

为了将图像加载到画布，我使用此方法=＆gt;

const load = (url: string) =>
    new Promise((resolve, reject) => {
        const image = new Image();

        if (!image) reject();

        image.crossOrigin = 'Anonymous';
        image.src = url;

        image.addEventListener('load', () => resolve(image));
        image.addEventListener('error', err => reject(err));
    });

经过大量调查后，我发现我鼓励这个错误：https://bugs.chromium.org/p/chromium/issues/detail?id=409090

实际上，随机图片没有显示在情绪板中。

我没有编写代码，所以我不确定这条线的必要性，有或没有它会有什么区别？

image.crossOrigin = 'Anonymous';

更新1

当我删除image.crossOrigin = 'Anonymous';时，图像加载不再出现CORS问题但是在尝试使用画布上的canvas.toDataURL('image/png')时出现此错误

未捕获DOMException：无法执行'toDataURL' 'HTMLCanvasElement'：可能无法导出受污染的画布。

Answer 1

如果您的图片来自不同的域，并且您希望在绘制这些图片后能够导出画布内容，那么您别无选择，只能使用crossOrigin属性加载它们。

如果您确实面临链接的错误，根据它，正确的解决方法是始终从服务器响应发送CORS标头，无论请求是否使用Origin标头。

快速的解决方法是通过在图像的src（img.src = url + '?v=' + Math.random();）中附加随机查询字符串来避免缓存。

Canvas + CrossOrigin Anonymous + CORS + Chrile + Mac OSX

1 个答案: