c# - ASP.net で div の画像を取得する

Question

Tシャツのデザインサイトを作ろうとしています。ユーザーは、最終的なカスタマイズの後、jquery を使用して背景に T シャツがある T シャツ div に異なる div と画像を配置して、その T シャツをカスタマイズします。カスタマイズを保存できるように、T シャツ/div の画像を保存します。

カスタマイズ div を画像に保存するにはどうすればよいですか?

Answer 1

html2canvas ライブラリを使用して、div を「キャンバス」にレンダリングし、それを画像として送り返すことができます。

コードを入手して、ここで例を参照してください。

http://html2canvas.hertzen.com/

これを元に戻すためのキャンバスからイメージへの変換は次のとおりです: http://www.nihilogic.dk/labs/canvas2image/

私の懸念。JavaScript エラーが表示され、ユーザーが の構成を失った場合はどうなりますか? ユーザーが「キャンバス」を処理できる新しい最新のブラウザーを使用しないと、div 内の内容を画像にレンダリングできます。

もう 1 つの方法は、フラッシュとフラッシュでのプログラミングを使用することです。

Answer 2

理想的には、DOM ベースのアプローチではなく、サーバー側の処理を使用して画像を生成することをお勧めします。GDI+ の使用を検討することをお勧めします。これらの行に沿って何かを開始する必要があります (ASP.NET ページのコンテキストを想定して)。

tシャツ.aspx

var imagePath1 = @"C:\path\to\tshirt.jpg";
var imagePath2 = @"C:\path\to\graphic.jpg";

var bg = new Bitmap(imagePath1); 
var overlay = new Bitmap(imagePath2);

var gfx = Graphics.FromImage(bg);

gfx.DrawImage(overlay, new Point(50, 50));

Response.ContentType="image/jpeg"

bg.Save(Response.OutputStream, ImageFormat.Jpeg);

次に、画像が必要なページで:

<img src="tshirt.aspx" />

上記の "tshirt.aspx" の同じコードを使用すると、 への呼び出しを に置き換えてbg.Save(Stream, ImageFormat)、bg.Save(filePath, ImageFormat)生成されたイメージをディスクに書き込むことができます。