📌  相关文章
📜  如何使用 JavaScript 截取 div 的屏幕截图?

📅  最后修改于: 2021-11-08 05:29:56             🧑  作者: Mango

可以使用html2canvas库截取 JavaScript 中任何元素的屏幕截图。该库可以从其官方网站下载。以下步骤显示了使用 JavaScript 截取

元素的屏幕截图的方法。

第 1 步:创建一个空白的 HTML 文档。
步骤 2:通过使用下载的文件或使用指向 CDN 版本的链接来包含html2canvas库代码。

HTML



  
    How to take screenshot of
    a div using JavaScript?
  
  
  
  
  
  
  


    


HTML


  

    
        How to take screenshot of
        a div using JavaScript?
    
  
    
    
  
    
    
    

  

    
        

GeeksforGeeks

        Hello everyone! This is a         trial page for taking a         screenshot.         

        This is a dummy button!                  

        Click the button below to         take a screenshot of the div.         

    
    

Screenshot:

    
  


HTML


  

    
        How to take screenshot of
        a div using JavaScript?
    
  
    
    
  
    
    
  
    

  

    
        

GeeksforGeeks

        Hello everyone! This is a         trial page for taking a         screenshot.         

        This is a dummy button!                  

        Click the button below to         take a screenshot of the div.         

                         
    

Screenshot:

    
  


HTML


  

    
        How to take screenshot of
        a div using JavaScript?
    
  
    
    
  
    
    
  
    

  

    
        

GeeksforGeeks

        Hello everyone! This is a         trial page for taking a         screenshot.         

        This is a dummy button!                  

        Click the button below to         take a screenshot of the div.         

                         
    

Screenshot:

    
          


第3步:创建一个

,必须在截图中捕获并给它一个id,以便以后使用。

HTML



  

    
        How to take screenshot of
        a div using JavaScript?
    
  
    
    
  
    
    
    

  

    
        

GeeksforGeeks

        Hello everyone! This is a         trial page for taking a         screenshot.         

        This is a dummy button!                  

        Click the button below to         take a screenshot of the div.         

    
    

Screenshot:

    
  

第 4 步:

元素内创建一个按钮,并为该按钮使用“onclick”处理程序。

HTML



  

    
        How to take screenshot of
        a div using JavaScript?
    
  
    
    
  
    
    
  
    

  

    
        

GeeksforGeeks

        Hello everyone! This is a         trial page for taking a         screenshot.         

        This is a dummy button!                  

        Click the button below to         take a screenshot of the div.         

                         
    

Screenshot:

    
  

第 5 步:截取屏幕截图的函数在                             

        

GeeksforGeeks

        Hello everyone! This is a         trial page for taking a         screenshot.         

        This is a dummy button!                  

        Click the button below to         take a screenshot of the div.         

                         
    

Screenshot:

    
          

可以通过右键单击它并将其另存为图像来保存屏幕截图,如下所示。

输出:

CSS 是网页的基础,用于通过样式化网站和 Web 应用程序进行网页开发。您可以按照此 CSS 教程和 CSS 示例从头开始学习 CSS。