如何将 HTML 呈现为图像？

HTML代码可以通过不同的方式转换为图像，例如 html2canvas JavaScript 库，有时也可以通过 CSS 转换为图像，这对于希望共享代码图像但无法共享确切代码的用户非常有帮助和有用。用户将从网页生成图像，并可以选择将 HTML 页面的特定部分转换为图片。

示例 1：这是一个相对简单的实现，它使用 CSS 将代码转换为图像。下面的代码不以任何方式涉及任何 JavaScript。

  

    
  
    

  

    

        
GEEKS FOR GEEKS
    

  

输出：

示例2：该示例实现了将HTML 代码转换为图像，其中预览按钮显示了转换后的照片。提供下载选项以使用 html2canvas JavaScript 库将其保存在本地计算机上。

  

    
    
  
    
    
  
    
        How to render HTML to an image?
    

  

    
  
        GEEKS FOR GEEKS
  
        
            A Computer Science portal for geeks. 
            It contains well written, well thought
            and well explained computer science 
            and programming articles, quizzes and ...
        
  
        
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science and
            programming articles, quizzes and ...
        
    
  
    
  
    
        Download
    
      
    
      
    Preview :
    
  
    
        $(document).ready(function () {
  
            // Global variable
            var element = $("#html-content-holder");
            var getCanvas; // Global variable
  
            $("#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", "gfg.png")
                    .attr("href", newData);
            });
        });
    

  

输出：