如何将 HTML 元素或文档转换为图像？

本文将告诉并指导用户使用 AngularJS 将 div 元素转换为图像。用户将从网页生成图像，并且还能够将 HTML 页面的特定部分转换为图片。此外，用户需要一个HTML 标签和html2canvas JavaScript 库。通过使用它，我们可以创建图片，即将 HTML 页面转换为 PNG 或 JPEG 格式的图像。还将 ul、li 和所需的div标签处理为图像格式。总而言之，html2canvas 库会将 HTML 页面呈现为用户提到的首选图像格式。这意味着用户将能够创建 div 或网页的任何元素的屏幕截图。

方法：

• 网页中有两个按钮，一个用于预览网页图像，另一个按钮用于下载网页图像。
• 使用 html2canvas JavaScript 库将 html 页面转换为图像。
• 当用户点击预览按钮时，会调用 html2canvas()函数，该函数还会调用另一个函数来附加画布图像的预览。
• 当用户单击下载按钮时，首先将文档更改为图像格式，然后开始下载它而不是显示图像。

例子：

  

    
        How to convert an HTML element
        or document into image ?
    
      
    
    
      
    
    

  

    
    
        GeeksForGeeks
    
      
    
        Convert div to image
    
      
    
          
        
            GeeksForGeeks
        
          
        
          
        
            ABOUT US
        
      
         
            GeeksForGeeks is a portal and a forum
            for many tutorials focusing on Programming
            ASP.Net, C#, jQuery, AngularJs, Gridview, MVC,
            Ajax, Javascript, XML, MS SQL-Server, NodeJs,
            Web Design, Software and much more
        
      
        
            How many times were you frustrated while 
            looking out for a good collection of 
            programming/algorithm/interview questions? 
            What did you expect and what did you get?
            This portal has been created to provide
            well written, well thought and well
            explained solutions for selected questions.
        
    
  
     
          
    
        Download
    
  
    
      
    Preview :
      
    
      
    
        $(document).ready(function() {
          
            // Global variable
            var element = $("#html-content-holder"); 
          
            // Global variable
            var getCanvas; 
  
            $("#btn-Preview-Image").on('click', function() {
                html2canvas(element, {
                    onrendered: function(canvas) {
                        $("#previewImage").append(canvas);
                        getCanvas = canvas;
                    }
                });
            });
  
            $("#btn-Convert-Html2Image").on('click', function() {
                var imgageData = 
                    getCanvas.toDataURL("image/png");
              
                // Now browser starts downloading 
                // it instead of just showing it
                var newData = imgageData.replace(
                /^data:image\/png/, "data:application/octet-stream");
              
                $("#btn-Convert-Html2Image").attr(
                "download", "GeeksForGeeks.png").attr(
                "href", newData);
            });
        });
    
    

  
                    

输出：