Html2canvas

Question

我想截图我的页面。

我在这里找到的初始代码：

https://retifrav.github.io/blog/2018/07/23/html-js-screenshot/

在我的例子中是这样的：

 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").toDataURL();
  this.download = "canvas-image.png";
 }, false);

和HTML：

    <div id="map">
    <div id="screenshot">
        <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>

控制台显示：

未捕获（承诺）TypeError：无法读取 null 的属性 'firstChild' 在 index.html:146

接下来

**Uncaught TypeError: document.getElementById(...).toDataURL is not a function
   at HTMLAnchorElement.<anonymous> (index.html:164)**

我猜哪个更重要，因为我无法导出屏幕截图。

我在这里找到了一些解决方案：

并尝试在我的代码中实现：

     canvas.crossOrigin = "Anonymous";

就在

下面

     canvas.id = "map";

     and

     var canvas = document.getElementById('map').querySelector('canvas');
     var dataURL = canvas.toDataURL();

就在

之上

     this.href = document.getElementById("map").innerHTML = dataURL();
     this.download = "canvas-image.png";
     }, false);

fiddle在这里

https://jsfiddle.net/kyzLfur3/

有人知道问题出在哪里吗？

Answer 1

您的 id="map" 元素是 div。他们没有 toDataURL。 canvas elements do，但不是 divs.

在问题的其他地方，您显示代码在 canvas within 中寻找 div:

var canvas = document.getElementById('map').querySelector('canvas');
var dataURL = canvas.toDataURL();

因此，如果在某个时候将 canvas 添加到 #map div，您可能希望将其添加到您的 click 处理程序：

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

Html2canvas - document.getElementById(...).toDataURL 不是函数

Html2canvas - document.getElementById(...).toDataURL is not a function

javascript

openlayers