如何将HTML元素或文档转换为图像（） _HTML文档

本文将告诉并指导用户使用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 = "https://www.lsbin.com/Preview" /> < a id = "btn-Convert-Html2Image" href = "https://www.lsbin.com/#" > 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 = https://www.lsbin.com/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 >

【如何将HTML元素或文档转换为图像（）】输出如下：