本文将告诉并指导用户使用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 >输出如下：
