在 C# 或 JavaScript 中将 DIV 内容转换为图像
convert DIV contents to Image in C# or JavaScript
我有一个DIV容器，里面有一些文本，背景图像，图像。我需要将整个DIV内容转换为图像并保存到本地文件夹中。请指导我如何使用 JavaScript 或 C# 将 Div 内容转换为图像。我在谷歌上搜索过，但没有得到正确的结果。请提供一些源代码..帮帮我。
由于您不想融合整个HTML页面，而是融合HTML的一部分，请参阅以下链接中p.campbell给出的答案以获得完美的解决方案。
使用 C# 将 HTML 控件（div 或表）转换为图像
其他答案可能提供捕获整个html网页到图像。如果您发现 p.campbell 的答案难以实现，请在网站中创建一个仅包含 Div 内容的 html 页面，并通过给定的其他答案将其捕获到图像中。
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>
http://jsfiddle.net/fG4fY/现已推出。
<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);
}
<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();
}
相关文章：
- 当图像转换为本地存储的DataURL时，EXIF被删除
- 如何使用jquery将base64图像路径转换为真实路径
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- 将包含SVG元素的HTML转换为图像文件
- 无法在Cordova 4.0 ios中将jpg/jpeg图像转换为Base64
- Cordova图像选取器转换为base64
- JS-如何将图像对象转换为灰度并显示
- 如何在fabricjs中嵌入图像base64将画布转换为SVG
- 应用将图表转换为图像的jqplot代码时Chrome挂起
- ng文件上传获胜't将jpg图像转换为png
- 用于将html转换为bbcode的Javascript，用于带有链接的图像
- 从 Base64 转换图像时出错 - HTMLImageElement 已损坏
- 如何在 Safari 上的 3D 转换图像上修复剪裁的文本
- 需要帮助更换扩展.jpg到.png或转换图像
- 什么是最简单的方法，我可以转换图像/元素到另一个图像/元素，同时拖动它
- 我可以转换图像从base64到二进制客户端
- 在Javascript中转换图像到内存流数据
- 正则表达式转换图像源
- 在firefox上转换图像为base64 javascript
- 从url转换图像为base64
