javascript - Canvas + CrossOrigin Anonymous + CORS + Chrome + Mac OS X

Question

为了将图像加载到 Canvas 上，我使用此方法=>

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') 在 Canvas 上

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Answer 1

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

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

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