Question

我下面的代码包含HTML标签和模式，下面是我使用库HTML2Canvas来捕获所选divs的方式。但是问题是当我单击下载时，它无法捕获下载文件中的图像。

它不断出现此错误Access to Image at '//IMAGE LINK' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

我尝试添加crossorigin：img匿名，但仍然没有运气。有没有简单的方法来解决这个问题？任何帮助将不胜感激。

function sendData() {


  $('#myModal2').addClass('modal-posit');

  var modalButton = $('[data-target="#myModal2"]')[0];
  modalButton.click();
  var modal = $('#myModal2')[0];
  


  setTimeout(function() {
    html2canvas(document.getElementById('capture'), {
      allowTaint: false,
      useCORS: true
    }).then(function(canvas) {
        downloadCanvas(document.getElementById('test'), canvas, 'test.png');
        modalButton.click();
    });
  }, 1000);
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

function downloadCanvas(link, canvas, filename) {
    link.href = canvas.toDataURL();
    link.download = filename;
    link.click();
}

document.getElementById("defaultOpen").click();

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border-bottom: 8px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 25px;
  border: 1px solid #ccc;
  border-top: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: white;
}

.jobs-panel {
  display: table;
  max-height: 100%;
  width: 85%;
  background-color: #b7bcbe;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  padding-bottom: 20px;
  padding-top: 20px;
}

.tabwidth {
  width: 85%;
  margin: 0 auto;
}
.modal-posit{
  position: relative;
}

<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>

<head>
    <meta charset="utf-8" />
    <style>


    </style>
    <link rel="shortcut icon" href="//#" />
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>

<body>
    <div id="capture">
    

      <div class="jobs-panel">
  
        <button class="modal-button" data-toggle="modal" data-target="#myModal2">MODAL BUTTON</button>
  
        <div class="tabwidth">
          <div class="tab">
            <button class="tablinks" onclick="openCity(event, 'Graph')" id="defaultOpen">Graph</button>
          </div>
  
          <div id="Graph" class="tabcontent">
            <img src="https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png" width="300" height="300" >
          </div>
  
          <div id="Paris" class="tabcontent">
            <h3>Paris</h3>
            <p>Paris is the capital of France.</p>
          </div>
  
          <div id="Tokyo" class="tabcontent">
            <h3>Tokyo</h3>
            <p>Tokyo is the capital of Japan.</p>
          </div>
        </div>
      </div>
      <div class="modal fade" id="myModal2" role="dialog">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h2 class="modal-title center">FAQ</h2>
            </div>
            <div class="modal-body">
              <div class="central">
                <h3 class="bold-text ">QUESTIONS
                </h3>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
 
    <button id="match-button" onclick="sendData();">capture</button>
    <a id="test" href="#"></a>
  </body>
</html>

<script>

</script>

Answer 1

图像的

CORS权限需要两者服务器和浏览器 。

首先，浏览器必须请求CORS权限。

您可以通过在图像上设置crossOrigin来实现。例子

const img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://somesite.com/someimage.jpg"

请注意，crossOrigin有3个有效值。

未定义

这意味着浏览器将不会请求CORS权限，也不会检查标头。即使服务器发送了标头，您仍然会遇到安全性错误，具体取决于您尝试对映像进行处理的方式（如果该映像来自另一个域）。这是默认设置。
“使用凭证”

这意味着浏览器将向服务器发送额外的信息（cookie等），以便它可以用来决定是否授予许可。
其他任何事情

您可以输入“”或“匿名”或“ foobarmoo”或其他任何内容。如果不是未定义的并且不是“使用凭据”，则为第3版。这意味着在没有任何额外信息的情况下要求获得全面的CORS许可。

第二个服务器必须发送正确的标头。

如果控制服务器，则需要对其进行配置以发送正确的标头。每个服务器都是不同的（apache，nginx，caddy等）。每个服务器都是不同的，如果您想知道如何配置该特定服务器，则应在文档中查找该服务器，或者询问该服务器的特定问题。

大多数服务器默认情况下不发送CORS标头。同样，大多数第三方网站也不发送图像的CORS标头。 3个例外是imgur，github页面和flickr（尽管遗憾的是至少在2018年7月之前还没有stack.imgur）。如果您尝试从网络上的随机服务器访问图像，那么除了联系他们的客户支持并要求他们添加标题之外，您就很不走运。

您要在AWS上访问映像。 AWS上的服务器未发送CORS标头。您的解决方案是（a）reconfigure AWS to send CORS headers，如果您可以控制那里的服务器（b）请控制该服务器的人添加CORS标头（c）意识到没有（a）或（ b）。

这是一个演示：我们将尝试加载您的图像，一张来自imgur的图像（确实设置了cors标头），另一张imgur但未设置crossOrigin来显示该图像，两者需要设置crossOrigin AND 接收cors标头。

loadAndDrawImage("https://s3-ap-southeast-1.amazonaws.com/investingnote-production-webbucket/attachments/41645da792aef1c5054c33de240a52e2c32d205e.png", "anonymous");
loadAndDrawImage("https://i.imgur.com/fRdrkI1.jpg", "anonymous");
loadAndDrawImage("https://i.imgur.com/Vn68XJQ.jpg");

function loadAndDrawImage(url, crossOrigin) {
  const img = new Image();
  img.onload = function() { 
    log("For image", crossOrigin !== undefined ? "WITH" : "without", "crossOrigin set:", url);
    try {
      const ctx = document.createElement("canvas").getContext("2d");
      ctx.drawImage(img, 0, 0);
      ctx.getImageData(0, 0, 1, 1);
      success("canvas still clean:", url);
    } catch (e) {
      error(e, ":", name);
    }
    log(" ");
  };
  img.onerror = function(e) {
    error("could not download image:", url);
    log(" ");
  };
  if (crossOrigin !== undefined) {
    img.crossOrigin = crossOrigin;
  }
  img.src = url;
}

function logImpl(color, ...args) {
  const elem = document.createElement("pre");
  elem.textContent = [...args].join(" ");
  elem.style.color = color;
  document.body.appendChild(elem);
}

function log(...args) {
  logImpl("black", ...args);
}

function success(...args) {
  logImpl("green", ...args);
}

function error(...args) {
  logImpl("red", ...args);
}

pre { margin: 0; }

<pre>check headers in devtools

</pre>

PS：还有另一种解决方案，但可以说是粗略的。您可以运行代理服务器，该服务器从AWS下载图像，然后将其发送到添加了CORS标头的页面（或从与该页面相同的域发送）到页面。我怀疑这就是您要寻找的解决方案。

JavaScript图片被CORS阻止

1 个答案:

首先，浏览器必须请求CORS权限。

第二个服务器必须发送正确的标头。