帆布+ CrossOrigin匿名+ CORS + Chrile + Mac OSX [英] Canvas + CrossOrigin Anonymous + 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））; 
}）; 
  

调查了很多后，我发现我很喜欢这个bug： https://bugs.chromium.org/p/chromium/issues/detail?id=409090

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

我没有写过代码，所以我不确定这条线的必要性，它有没有区别？

 图片。 crossOrigin ='匿名'; 
  

更新1

当我删除 image.crossOrigin ='Anonymous'; 图片加载不再有CORS问题，但是当我尝试使用 canvas.toDataURL（'image / png'）在画布上
$ b

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

解决方案 div>

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

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

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

For the purpose of loading images to a canvas, I use this method =>

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

After investigating a lot, I found out that i am encoutring this bug : https://bugs.chromium.org/p/chromium/issues/detail?id=409090

Indeed, randomly pictures are not shown in the moodboard.

I didn't wrote the code, so I am not sure of the necessity of this line, what would be the difference with or without it ?

image.crossOrigin = 'Anonymous';

UPDATE 1

When I remove the image.crossOrigin = 'Anonymous'; the image loading doesn't have CORS issue anymore but then I get this error when trying to use the canvas.toDataURL('image/png') on the canvas

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

解决方案

If your images come from a different domain, and you want to be able to export the canvas content after you did draw these images, then you have no choice than loading them with the crossOrigin attribute.

If you are really facing the linked bug, according to it, the proper fix is to always send the CORS headers from your server response, whether or not the request is made with the Origin header.

And a fast workaround is to avoid the cache, by appending a random query string in the image's src (img.src = url + '?v=' + Math.random();).

这篇关于帆布+ CrossOrigin匿名+ CORS + Chrile + Mac OSX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！