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

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：无法在 index.html:146 处读取 null 的属性“firstChild”

接下来

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

我想这更重要，因为我无法导出我的屏幕截图。

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

二维码转dataURL

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

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

小提琴在这里

https://jsfiddle.net/kyzLfur3/

有谁知道问题可能出在哪里？

标签： javascriptopenlayershtml2canvas

Answer 1

你的id="map"元素是一个div. 他们没有toDataURL。canvas元素可以，但不是divs。

在问题的其他地方，您会显示在其中寻找 a 的canvas 代码div：

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

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

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