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

2021年3月9日16:06:13 发表评论 719 次浏览

本文将告诉并指导用户使用AngularJS将div元素转换为图像。用户将从网页生成图像, 并且还能够将HTML页面的特定部分转换为图片。另外, 用户需要HTML标签和html2canvasJavaScript库。通过使用此功能, 我们可以创建图片, 即将HTML页面转换为PNG或JPEG格式的图像。还处理ul, li和所需div标记为图像格式。概括起来, html2canvas库将HTML页面呈现为用户提到的首选图像格式。这意味着用户将能够创建div或WebPage的任何元素的屏幕截图。

方法:

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

例子:

<!DOCTYPE html>
< html >
  
< head >
     < title >
         How to convert an HTML element
         or document into image ?
     </ title >
      
     < script src =
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" >
     </ script >
      
     < script src =
"https://files.codepedia.info/files/uploads/iScripts/html2canvas.js" >
     </ script >
</ head >
  
< body >
     < center >
     < h2 style = "color:green" >
         lsbin
     </ h2 >
      
     < h2 style = "color:purple" >
         Convert div to image
     </ h2 >
      
     < div id = "html-content-holder" style="background-color: #F0F0F1; 
                 color: #00cc65; width: 500px;padding-left: 25px; 
                 padding-top: 10px;">
          
         < strong >
             lsbin
         </ strong >
          
         < hr />
          
         < h3 style = "color: #3e4b51;" >
             ABOUT US
         </ h3 >
      
         < p style = "color: #3e4b51;" > 
             < b >lsbin</ b > 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
         </ p >
      
         < p style = "color: #3e4b51;" >
             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.
         </ p >
     </ div >
  
     < input id = "btn-Preview-Image" type = "button"
                 value = "Preview" /> 
          
     < a id = "btn-Convert-Html2Image" href = "#" >
         Download
     </ a >
  
     < br />
      
     < h3 >Preview :</ h3 >
      
     < div id = "previewImage" ></ div >
      
     < script >
         $(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", "lsbin.png").attr(
                 "href", newData);
             });
         });
     </ script >
     </ center >
</ body >
  
</ html >

输出如下:

ngcut

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: