在 C# 或 JavaScript 中将 DIV 内容转换为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10529132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
convert DIV contents to Image in C# or JavaScript
提问by ganesh m
I have a DIV container which has some text, background-image, image. I need to convert that whole DIV contents into image and save into local folder. Please guide me how to convert Div contents to Image using JavaScript or C#. I have searched in Google, but not getting correct result. give some source code please.. help me guys.
我有一个 DIV 容器，里面有一些文本、背景图像、图像。我需要将整个 DIV 内容转换为图像并保存到本地文件夹中。请指导我如何使用 JavaScript 或 C# 将 Div 内容转换为 Image。我在谷歌搜索过，但没有得到正确的结果。请给一些源代码..帮帮我吧伙计们。
采纳答案by Imran Rizvi
As you don't want to conver whole HTML page but a part of html, See the answer given by p.campbell in the following link for the perfect solution.
由于您不想转换整个 HTML 页面而是 html 的一部分，请参阅以下链接中 p.campbell 给出的答案以获得完美的解决方案。
Convert a HTML Control (Div or Table) to an image using C#
使用 C# 将 HTML 控件（Div 或 Table）转换为图像
Other answers maybe providing capturing whole html web page to image. If you find the p.campbell's answer hard to implement , create an html page in the website with only Div content and capture it to image by given other answers.
其他答案可能提供将整个 html 网页捕获到图像。如果您发现 p.campbell 的答案难以实施，请在网站中创建一个仅包含 Div 内容的 html 页面，并通过给出其他答案将其捕获为图像。
回答by Nick Bull
http://html2canvas.hertzen.com/is what you're looking for. Usage:
http://html2canvas.hertzen.com/正是您要找的。用法：
HTML:
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>
http://jsfiddle.net/fG4fY/is now available.
回答by Ranajit kumar
<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);
}
回答by JIYAUL MUSTAPHA
<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();
}
