离线版本中的 HTML2canvas - 受污染的画布可能无法导出

Question

我收到错误：

未捕获的 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。 在 HTMLAnchorElement 处。

我不知道为什么，因为我按照以下建议在 JavaScript 和 HTML 代码中添加了

crossOrigin = 'anonymous'

到我的代码中：

“HTMLCanvasElement”上的“toDataURL”：可能无法导出受污染的画布

https://jsfiddle.net/user2314737/q1pezv2j/

我觉得情况和这个类似：

在 S3 存储桶上设置跨源后，“受污染的画布可能无法导出”问题仍然存在

现在，我的代码如下所示：

  <script>
  function makeScreenshot() {
    html2canvas(document.getElementById("screenshot"), {scale: 2}).then(canvas => {
    canvas.id = "map";
    canvas.crossOrigin = 'anonymous';
    var main = document.getElementById("main");
    while (main.firstChild) {
   main.removeChild(main.firstChild); 
    }
    console.log(main);
    main.appendChild(canvas);
    });
    }

    document.getElementById("a-make").addEventListener('click', function()
   {
document.getElementById("a-make").style.display = "none";
makeScreenshot();
document.getElementById("a-download").style.display = "inline";
   }, false);

   document.getElementById("a-download").addEventListener('click', function()
   {
  this.href = document.getElementById("map").querySelector('canvas').toDataURL();
 this.download = "canvas-image.png";
 }, false);
    </script>

和 HTML 部分：

     </div>
    <div id="map" crossorigin="anonymous">
     <div id="screenshot" crossorigin>
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content"></div>
     </div>
        </div>
     <a id="a-make" href="#">Make a screenshot</a>
     <a id="a-download" href="#" style="display:none;">Download a screenshot</a>
     </div>

“跨域”没有帮助。还有其他解决办法吗？

与域名情况有关吗？

受污染的画布可能无法导出

如果问题是 CORS，如下所示：

Angular 8 无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布

我使用Google Chrome浏览器，如下情况：

Chrome：受污染的画布可能无法导出；仅限离线应用

但问题是，我无法将数据放入 中，因为在我的例子中是

<div id="map"></div>

一些解决方案需要临时托管：

Canvas.toDataURL() 受污染的画布可能无法导出

CORS 问题已在此处进行了解释：

https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

但它仍然适用于图像而不是情况。

基本上，我需要这样的东西：

http://jsfiddle.net/mvjuhkwq/

但就我而言，来自另一个脚本，基于分离的文件，该脚本链接到我的代码：

<script src="./resources/qgis2web.js"></script>

而不是放在容器中的index.html文件上。

我想离线启动此脚本并使其仅在离线时有用。可以吗？

更新：

我还将

crossOrigin: 'anonymous'

添加到了 qgis2web.js 文件中

 var map = new ol.Map({
  controls: ol.control.defaults({attribution:false}).extend([
    expandedAttribution,new ol.control.ScaleLine({}),new measureControl(),new 
  geolocateControl()
   ]),
   target: document.getElementById('map'),
   renderer: 'canvas',
   crossOrigin: 'anonymous',
   overlays: [overlayPopup],
   layers: layersList,
   format: 'image/png',
   view: new ol.View({
     maxZoom: 22, minZoom: 17
  })
});

还是没有结果

Answer 1

html2canvas(document.getElementById("screenshot"), {
    allowTaint: true,
    foreignObjectRendering: true,

    // your configurations
    scale: 2
}).then(canvas => {...});

Answer 2