我有一个 DIV 容器，其中包含一些文本、背景图像、图像。我需要将整个 DIV 内容转换为图像并保存到本地文件夹中。 请指导我如何使用 JavaScript 或 C# 将 Div 内容转换为 Image。 我在谷歌中搜索过，但没有得到正确的结果。请给一些源代码..帮帮我。
【问题讨论】：
标签： c# javascript asp.net html css
<head runat="server">
<script type="text/javascript" src="html2canvas.min.js"></script>
<style type="text/css">
.labans {
/* color:#990000;*/
color: #336600;
font-family: Verdana;
font-size: 14px;
font-weight: 600;
text-align: center;
}
.labans1 {
/* color:#990000;*/
color: #000000;
font-family: Verdana;
font-size: 12px;
font-weight: 600;
}
.divsection {
border: 1px solid #DDD;
padding: 8px 15px;
spacing: 2px;
border-radius: 8px;
box-shadow: #EEEEEE 0.4em 0.0em 0.2em;
background-image: url(../Images/Front.jpg);
height: 15cm;
width: 9.5cm;
background-size: 358px;
background-position: center top;
background-repeat: no-repeat;
object-fit: fill;
}
</style>
<title></title>
<!--ForExport data in iamge -->
<script type="text/javascript">
function ConvertToImage(btnExport) {
html2canvas($("#dvContent")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnExport.name, "");
});
return false;
}
</script>
<!--ForExport data in iamge -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../data/assets/js/html2canvas.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="row" id="divhiddenInfo" runat="server" style="display: none">
<div class="col-lg-2">
<asp:HiddenField ID="lblCode" runat="server" />
</div>
</div>
<asp:Button ID="btnDownload" Text="Download Front" runat="server" UseSubmitBehavior="false"
OnClick="DownloadImage" OnClientClick="return ConvertToImage(this)" />
<div id="dvContent" class="divsection">
<asp:HiddenField ID="hfImageData" runat="server" />
<table width="100%">
<tr>
<td valign="Right">
<table width="88%">
<tr>
<td class="style43">
<br />
<asp:Image ID="Image1" runat="server" Height="155px" Width="129px" ImageAlign="Right" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblDegs" runat="server" CssClass="labans"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblCity" runat="server" CssClass="labans"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbllocation" runat="server" CssClass="labans"></asp:Label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
protected void DownloadImage(object sender, EventArgs e)
{
string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
Response.Clear();
Response.ContentType = "image/jpeg";
Response.AddHeader("Content-Disposition", "attachment; filename=Front.jpeg");
Response.Buffer = true;
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.BinaryWrite(bytes);
Response.End();
}
【讨论】：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.min.js"></script>
<script type="text/javascript">
function ConvertToCanvas(btnExporttoimage) {
html2canvas($("#ContentInfo")[0]).then(function (canvas) {
var base64 = canvas.toDataURL();
$("[id*=hdnImageData]").val(base64);
__doPostBack(btnExporttoimage.name, "");
});
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="ContentInfo" runat="server" style="width: 600px; background-color: White;
padding: 5px; height: 600px;">
<u>Student Info</u>
<br />
<br />
<table>
<tr>
<td>
ID
</td>
<td>
Name
</td>
<td>
Country
</td>
<td class="style1">
Roll.
</td>
</tr>
<tr>
<td>
1
</td>
<td>
Ranjit
</td>
<td>
India
</td>
<td class="style1">
2345
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Soumya
</td>
<td>
India
</td>
<td class="style1">
5678
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Tapan
</td>
<td>
Srilanka
</td>
<td class="style1">
7890
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Suresh
</td>
<td>
Bhutan
</td>
<td class="style1">
4345
</td>
</tr>
</table>
</div>
<br />
<asp:HiddenField ID="hdnImageData" runat="server" />
<asp:Button ID="btnExporttoimage" Text="Export to Image" runat="server" UseSubmitBehavior="false"
OnClientClick="return ConvertToCanvas(this)" OnClick="btnExporttoimage_Click" />
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Drawing.Imaging;
public override void VerifyRenderingInServerForm(Control control)
{
/* Verifies that the control is rendered */
}
protected void btnExporttoimage_Click(object sender, EventArgs e)
{
string base64 = Request.Form[hdnImageData.UniqueID].Split(',')[1];
byte[] IMGbytes = Convert.FromBase64String(base64);
///////////-------FOLLOWING CODE IS TO CONVERT IMAGE TO BINARY AND TO DEFAULT DOWNLOAD PATH--------////////////////////
//Response.Clear();
//Response.ContentType = "image/png";
//Response.AddHeader("Content-Disposition","canvas.png"));
//Response.Buffer = true;
//Response.Cache.SetCacheability(HttpCacheability.NoCache);
//Response.BinaryWrite(IMGbytes);
//Response.End();
///////////-------FOLLOWING CODE IS TO CONVERT IMAGE TO BINARY AND TO DESIRE DOWNLOAD PATH--------////////////////////
MemoryStream msImage = new MemoryStream(IMGbytes, 0, IMGbytes.Length);
msImage.Write(IMGbytes, 0, IMGbytes.Length);
System.Drawing.Image imageTosave = System.Drawing.Image.FromStream(msImage, true);
string filePath = Path.Combine(Server.MapPath("~/CanvasImages/"), "canvas.png");
imageTosave.Save(filePath, ImageFormat.Png);
}
【讨论】：
http://html2canvas.hertzen.com/ 是您正在寻找的。用法：
HTML：
<head>
<title>Example of capturing the div</title>
</head>
<body>
<div id="pictureMe"><p>Try this out on JSFiddle right now.</p></div>
<script src="js/html2canvas.js" type="text/css" rel="stylesheet"></script>
<script type="text/javascript">
html2canvas(document.getElementByID("pictureMe"), {
onrendered: function(canvas) {
/* What you want to do with the screenshot goes here */
document.body.appendChild(canvas);
}
});
</script>
</body>
【讨论】：
由于您不想转换整个 HTML 页面而是转换 html 的一部分，请参阅以下链接中 p.campbell 给出的答案以获得完美的解决方案。
Convert a HTML Control (Div or Table) to an image using C#
其他答案可能会提供将整个 html 网页捕获到图像。如果您发现 p.campbell 的答案难以实施，请在网站中创建一个仅包含 Div 内容的 html 页面，并通过给定的其他答案将其捕获到图像中。
【讨论】：