27

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

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

现在，当我截取屏幕截图时，我不想成为页面的一部分？我怎样才能防止它们成为屏幕截图的一部分。

我认为的一种方法是克隆元素然后删除元素，但是对克隆进行截图会产生白屏。这是我使用的代码：

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

4 回答 4

79

将此属性：添加data-html2canvas-ignore到处理屏幕截图时您不想被拍摄的任何元素。

希望这将有助于下一个人。

于 2013-12-19T10:20:11.297 回答
3

当我使用这个库时，我遇到了一个问题，即库会下载我的应用程序中的所有图像，这会导致应用程序运行缓慢。我使用 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);
    });
于 2019-10-30T11:54:05.020 回答
1

如果您不想使用属性，html2canvas 确实提供了删除元素的方法。例如：

html2canvas( document.body, {
    ignoreElements: function( element ) {
        
        /* Remove element with id="MyElementIdHere" */
        if( 'MyElementIdHere' == element.id ) {
            return true;
        }
        
        /* Remove all elements with class="MyClassNameHere" */
        if( element.classList.contains( 'MyClassNameHere' ) ) {
            return true;
        }
        
    }
} ).then( function( canvas ) {
    document.body.appendChild( canvas );
} );

有关详细信息，请参阅html2canvas 选项。

于 2020-09-16T15:45:35.753 回答
0

您可以创建HOCfor<Printable/>和，您可以用 那些将被排除在外的子组件<NonPrintable/>来包装您的组件。<NonPrintable><YourCoolComponent/></NonPrintable>


import React from "react"

interface INonPrintable {
  children: React.ReactChildren
}

/*
HOC - Printable which injects the printId to the React component
which gets us Printable Context to html2canvas => jsPDF
eg:
 <Printable printId="about-you-print">
    <PersonalInfo badEmail={badEmail} />
    <IdentityInfo />
    <AdditonalInfo />
    <AddressInfo
     serviceAddress={serviceAddress}
     billingAddress={this.state.billingAddress}
     setBillingAddress={this.setBillingAddress}
    />
</Printable>

*/
export default function Printable({ printId = "", children, ...restProps  }) {
  return <div print-id={printId} {...restProps}>{children}</div>
}


/*
HOC - NONPrintable which injects the data-html2canvas-ignore to the React component
which gets us Printable Context to html2canvas => jsPDF
eg:
<NonPrintable style={{display:"flex",justifyContent:'space-around'}}>
  <Button
    text="Print PDF using Own utility"
    onClick={this.handlePrintPdf}
    />
    <Button
    text="Print PDF using html2canvas + jsPDF"
    onClick={this.handlePrintwithPDFjs}
    />
</NonPrintable>
*/

export const NonPrintable = ({ children, ...restProps }) => {
  return <div data-html2canvas-ignore {...restProps}>{children}</div>
}
于 2021-07-23T05:59:35.803 回答