私は、テキスト、背景画像、画像を持つDIVコンテナを持っています。そのDIVコンテンツ全体をイメージに変換してローカルフォルダに保存する必要があります。 JavaScriptやC＃を使用してDivコンテンツをImageに変換する方法を教えてください。 Googleで検索しましたが、正しい結果が得られませんでした。いくつかのソースコードを教えてください..私を助けてください。DIVの内容をC＃またはJavaScriptの画像に変換する
完全なHTMLページではなくHTMLの一部を変換したくないので、完璧な解決策については、次のリンクのp.campbellによる回答を参照してください。多分画像を取り込む全体HTML Webページを提供する
Convert a HTML Control (Div or Table) to an image using C#
他の回答。 p.campbellの回答が難しい場合は、Divコンテンツのみを含むWebページにhtmlページを作成し、それ以外の回答で画像に取り込みます。
残念Imran Rizvi ..それはどのように動作するのかわかりません。ソースコードで私を詳しく教えてくださいね?? –
URLのスクリーンショットが表示されます。私はImageにdivの内容だけを必要とします。 –
p.campbellの2番目の答えが見えましたか？ –
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);
}
http://stackoverflow.com/questions/2316564/taking-screenshot-of-a-webpage-programmaticallyを見てください。 – rt2800
@ rt2800その答えは、ウェブページ全体をキャプチャするためのものです。彼は特定のDivをキャプチャするために探しています –