如何使用 JavaScript 截取 div 的屏幕截图？

可以使用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?
    
  
    
    
    
  
    
    
  
    
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    

  

    
        GeeksforGeeks
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        
        This is a dummy button!
         Dummy
        
        Click the button below to
        take a screenshot of the div.
        
  
        
        
            Take Screenshot
        
    
    Screenshot:
    
  
    
  
        // Define the function 
        // to screenshot the div
        function takeshot() {
            let div =
                document.getElementById('photo');
  
            // Use the html2canvas
            // function to take a screenshot
            // and append it
            // to the output div
            html2canvas(div).then(
                function (canvas) {
                    document
                    .getElementById('output')
                    .appendChild(canvas);
                })
        }
    

  

第3步：创建一个

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

HTML

  

    
        How to take screenshot of
        a div using JavaScript?
    
  
    
    
    
  
    
    
    
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    

  

    
        GeeksforGeeks
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        
        This is a dummy button!
         Dummy
        
        Click the button below to
        take a screenshot of the div.
        
    
    Screenshot:
    

  

第 4 步：在

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

HTML

  

    
        How to take screenshot of
        a div using JavaScript?
    
  
    
    
    
  
    
    
  
    
        #photo {
            border: 4px solid green;
            padding: 4px;
        }
    

  

    
        GeeksforGeeks
        Hello everyone! This is a
        trial page for taking a
        screenshot.
        
        This is a dummy button!
         Dummy
        
        Click the button below to
        take a screenshot of the div.
        
  
        
        
            Take Screenshot
        
    
    Screenshot:
    

  

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

        

GeeksforGeeks

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

        This is a dummy button!          Dummy         

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

                                 Take Screenshot              

    

Screenshot:

    

          

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

输出：

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