如何在截屏前删除某些元素？

Question

我可以使用以下示例代码截取页面的屏幕截图：

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

现在当我截取屏幕截图时，有些div我不想成为页面的一部分吗？如何防止它们成为屏幕截图的一部分。

我想的一种方法是克隆元素，然后删除元素，但是对克隆进行截图会显示白色屏幕。这是我使用的代码：

html2canvas($(document.body).clone()[0], {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

Answer 1

添加此属性：data-html2canvas-ignore到处理屏幕截图时不希望使用的任何元素。

希望这对下一个家伙有帮助。

Answer 2

当我使用该库时，我遇到一个问题，就是lib下载了我的应用程序中的所有图像，这导致应用程序运行缓慢。我使用ignoreElements选项解决了该问题。这是我的代码：

  var DropAreaElement= document.getElementById("123");
    var config= {
        useCORS: true,
        ignoreElements: function (element) {
            if (element.contains(DropAreaElement) || element.parentElement.nodeName =="HTML" || element == DropAreaElement || element.parentNode == DropAreaElement) {
                console.log("elements that should be taken: ", element)
                return false;
            }else {
                return true;
            }
        }
    };
    html2canvas(DropAreaElement, config).then(function (canvas){
        var imgBase64 = canvas.toDataURL('image/jpeg', 0.1);
        console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_" + new Date().getTime() + ".jpeg").appendTo("body");
            triggerDownload[0].click();
            triggerDownload.remove();
    }).catch(Delegate.create(this, function (e){
        console.error("getLayoutImageBase64 Exception:", e);
    });