帆布+ CrossOrigin匿名+ CORS + Chrile +的Mac OSX

对于加载图像的目的，画布，我用这个方法=>帆布+ CrossOrigin匿名+ CORS + Chrile +的Mac OSX

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)); 
    });

调查了很多之后，我发现我正在encoutring这bug：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'：受感染的画布可能无法导出。

来源

2017-10-06 BastienSander

如果您的图像来自不同的领域，并且希望能在你们做得出这些图像后在画布内容导出，那么你没有选择，而不是与crossOrigin属性加载它们。

如果你确实面临链接错误，根据它，正确的解决方法是始终从服务器响应中发送CORS头文件，而不管请求是否使用Origin头文件。

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

来源

2017-10-07 02:34:10 Kaiido

感谢您的快速解决，我现在要实现这一点，如果适当的解决方案工作，我会稍后发布;） – BastienSander

帆布+ CrossOrigin匿名+ CORS + Chrile +的Mac OSX

回答

相关问题