Stackblitz Angular 项目 - 向 canvas 发布绘图图像 - Canvas 已被 CORS 污染

Question

我可以将图像绘制到 Html Canvas，并且我尝试使用 'anonymous' 属性，但是我仍然无法提取图像数据来自我的 canvas.

图像确实加载了，但我收到了经典的错误消息。

如果我添加这一行

  this.imageObj.crossOrigin = 'Anonymous';

图像不会被绘制到我的canvas（并且没有错误）。

请参阅 app.component.ts，此处的 loadImage() 函数：

https://stackblitz.com/edit/angular-ivy-ohaqyi?file=src/app/app.component.ts

 loadImage() {
    this.imageObj = new Image();
    // this.imageObj.crossOrigin = 'Anonymous';
    this.imageObj.src =
      'https://www.bobmazzo.com/wp-content/uploads/2009/06/bobpiano1-300x213.jpg';

    this.imageObj.onload = () => {          
      this.redraw();
    };
    
  }

*** 更新 *** 根据下面的回答，服务器没有打开 CORS。所以我最终使用了一个更友好的图像站点，例如 https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014_960_720.jpg

Answer 1

正如我们在您的 stackblitz 上看到的错误

当你添加 this.imageObj.crossOrigin = 'Anonymous'; 你得到

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.bobmazzo.com/wp-content/uploads/2009/06/bobpiano1-300x213.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

但是添加的时候也报错：

ERROR DOMException: The operation is insecure.

这两个错误都与 CORS configurations 相关。

CORS 是您需要在提供“https://www.bobmazzo.com”网站的服务器上配置的东西。

要深入了解，这是你的问题：Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Stackblitz Angular 项目 - 向 canvas 发布绘图图像 - Canvas 已被 CORS 污染

Stackblitz Angular project - issue drawing image to canvas - Canvas has been tainted by CORS

html5-canvas

angular