在使用htmlToImage时，请求的资源上没有“访问-控制-允许-源”标头。

Question

我正在尝试使用htmlToImage方法，但正在显示错误"Access to fetch at“/ aws映像url /”from from 'http://localhost:4200‘已被CORS策略阻塞:请求的资源上不存在’访问控制-允许-原产地‘标题。如果不透明的响应满足您的需要，请将请求的模式设置为' No - CORS’，以获取禁用CORS的资源。“

我在img标签中使用的图像url来自aws s3桶。在AWS s3上，我们已经配置了CORS

1. AllowedOrigins as "*".
2. AllowedHeaders as“*”。

注意：

browser.

• When

1. --在firefox浏览器中工作正常，但在chrome浏览器和Opera 中不工作--我将在浏览器选项卡中打开分级base64，图像不会出现。只有空白才会来临。--

我的html代码是：

<div id="editedimage">
   <img class="img-style" src="<imgUrl>" alt="image"> 
<div>

js代码是：

    var node = document.getElementById('editedimage');
    htmlToImage.toPng(node)
      .then((dataUrl) => {
        console.log("url", dataUrl);
      .catch((error) => {
      console.error("error", error);
      });

小队，帮帮我。提前谢谢。

Answer 1

如果您想要显示基本64图像，您需要在模板中使用它之前对url进行消毒。

import { DomSanitizer } from '@angular/platform-browser';

constructor( private sanitizer: DomSanitizer, .... ) {
    this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
}