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

Posted 2023-03-05

【中文标题】如何在截屏前删除某些元素？

【英文标题】：How to remove certain elements before taking screenshot?

【发布时间】：2014-01-02 14:45:38

【问题描述】：

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

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

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

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

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

【参考方案1】：

您可以为 <Printable/> 和 <NonPrintable/> 创建 HOC ，您可以使用 <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>

【参考方案2】：

如果您不想使用属性，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 options。

【参考方案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);
    );

【参考方案4】：

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

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

【讨论】：

或者您可以在调用 html2canvas 函数之前使用 jquer/javascript 隐藏这些 div，然后在该函数之间显示。

paa g 是否适用于带有滚动的页面？我正在尝试这样做，因为我有 div 它将被转换为包含滚动的画布，但它只转换那些在屏幕上可见的元素，换句话说，它正在拍摄屏幕截图....有没有办法采取整页截图？？？

我正在获取整个页面，而不仅仅是可见区域。

也帮助下一个人：“向元素添加属性”具体指<div data-html2canvas-ignore="true"> Hidden in pdf </div>。

data-html2canvas-ignore="true"