私は、テキスト、背景画像、画像を持つ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);
}
- 1. divの内容に応じて画像を変更する
- 2. divの内容をjavascriptに置き換えます。
- 3. jQueryの非表示画像は、内容を変更するには、show画像
- 4. jQueryライブプレビューdiv内のテキストを画像に変換
- 5. 画像をクリックしたときに2つのdivの内容を変更します
- 6. 内容に応じた伸縮画像
- 7. C#でHtmlの画像をURIに変換するには?
- 8. divの内容をJqueryの別のhidden divの内容に置き換えます。
- 9. cで画像ファイルタイプを変換する
- 10. 子divの内容を取得する方法div javascript
- 11. 画像変換(強風)/ C++
- 12. グレースケール画像変換ターボC++
- 13. Fancybox内のdivの内容を置換する
- 14. div要素を画像に変換する
- 15. 画像ギャラリー(JavaScript)でdivを交換する
- 16. ラップの内容は、画像が
- 17. javascript - メインページのjs内のiframe内のdivの内容を取得
- 18. Webページ内のフォントを画像に変換する方法
- 19. iPhone CALayerの画像配列の内容レイヤーに画像をロードする
- 20. paperclip - tiff画像をjpgまたはpngに変換する
- 21. divの内容を別のdivにコピー
- 22. Ajaxでdivの内容を置き換えます
- 23. javascriptを使用してテキストを画像に変換する
- 24. JavaScriptを使用してローカル画像をbase64に変換する
- 25. MATLAB:画像を別の画像に変換する方法
- 26. iPhone SDKの画像を白黒画像に変換する
- 27. iosの画像を漫画に変換するには
- 28. ファイルの内容を文字列に変換するには?
- 29. JavaScript内の画像の位置を変更する
- 30. キャンバスをJavaScriptで画像に変換する
http://stackoverflow.com/questions/2316564/taking-screenshot-of-a-webpage-programmaticallyを見てください。 – rt2800
@ rt2800その答えは、ウェブページ全体をキャプチャするためのものです。彼は特定のDivをキャプチャするために探しています –