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

Question

我收到错误：

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

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

'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

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

我觉得情况和这个差不多：

"Tainted canvases may not be exported" issue still present after setting cross-origin on S3 bucket

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

  <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>

“跨域”没有帮助。有没有其他解决方案？

跟领域情况有关系吗？

Tainted canvases may not be exported

如果问题是这里的 CORS：

Angular 8 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported

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

Chrome: Tainted canvases may not be exported; Offline-only app

但问题是，我不能将数据放在 中，因为在我的情况下是 <div id="map"></div>

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

Canvas.toDataURL() Tainted canvases may not be exported

这里已经解释了 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 文件中。

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

更新：

我还在 qgis2web.js 文件中添加了crossOrigin: 'anonymous'

 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 => {...});