サーバー上の画像としてDivコンテンツを保存する

Question

私はVBでjQueryと.Netを少し勉強しています。私は基本的にdivを追加し、tshirtの上にテキスト、画像などを追加する製品のカスタマイズツールを作成しました。

私は重要なステージに立ち往生しています！

divに適用されたCSSを考慮して、これらのdivのテキストと画像をすべて1つのフラットイメージに変換するdivのコンテンツを変換できる必要があります。

サーバー上のブラウザの内容をキャプチャして低解像度のサムネイルなどで表示できることを聞いたことがありますが、ちょっと面倒ですね！高解像度の画像を作成することは本当にうれしいでしょう。

html5のキャンバスに変換して聞いたことがありますが、それを書いていますが、私にはあまりにも複雑で、ブラウザのサポートは問題です。

これは.NETで可能ですか？

おそらく何かがjavascriptで実行できましたか？

正しい方向への助けや指導をいただければ幸いです！

EDIT：

私は多分、私はこのために2つのソリューションを行うことができます考えています。理想的には、私はウェブサイト上で表示するための通常のres jpg/pngなどで終わるだろうが、印刷準備が整った高解像度ファイルも非常に望ましいだろう。

PostScript Printer - 私はそれについて聞いたことがありますが、私は初心者（特にwiki black out）のためにそれを理解するのに苦労しています。おそらく、私のdivコンテンツからhtmlページを作成し、それをEPSファイルに印刷するために送信することができました。誰でもこれについての良いチュートリアルを知っていますか？

Answer 1

これは約10年前です。興味深いことに、利用可能な技術は本当にあまり変わっていません。

アップデート - ベスト回答

Spreadshirtは、自社の製品をライセンス：http://blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/

はちょうどそれをライセンス。実際のグラフィックスで操作経験を操作して印刷しない限り、これを自分で行わないでください。今日の世界では、彼らが何をしたかを複製するために約4000〜5000時間の開発者の時間を見ています...そして、それはあなたがそれに取り組んでいる2つのトップティアの人々を持っている場合です。

---

短い答え：あなたはhtmlですることはできません。

は少し長いに答える：あなたは本番のタイプの印刷に必要な解像度のレベルを取得することができませんスクリーンキャップクライアント側をしているのでそれは一部では動作しません
。現代のスクリーン解像度は、通常100ppi程度である。まともな印刷物のためには、その密度の3倍から6倍の間のものが本当に必要です。さもなければ、あなたはピクセル化をたくさんして、それが出てくるときには一般に気になるように見えます。

異なる回答：
あなたの最善の策は、SVG（スケーラブルベクターグラフィックス）のようなものを活用して、ブラウザに描画面の種類を提供することです。これを行うには、Flash（Spreadshirt.comではこれを使用）またはSilverlight（推奨しません）を使用する方法がいくつかあります。我々はフラッシュを使用し、それはかなり良かった。

あなたはかもしれません。は、HTML5を使用して逃げることができます。どんなパスを選んでも複雑になるでしょう。

ユーザーが図面に満足して印刷したい場合は、最終的なファイルを作成して、Postscriptに変換するプロセスを実行するか、Tシャツプロバイダに必要なフォーマットを実行します。コンバータ（別名RIPソフトウェア）は、長い時間をかけて開発したり、多額の費用をかけたりする予定です... 1つを選んでください。 （役に立つヒント：それを購入してください、それから私たちは約20,000米ドルを費やし、開発しようとするよりはるかに安いです）。

もちろん、これはカラーマッチングやキャリブレーションなどの問題を無視します。これは実際に私たちの主な問題でした。みんなのモニターは少し違っていて、あるマシンでは赤色に見えますが、別のマシンではピンクです。

ちょっとした背景のために、カスタマイズしたラッピングペーパーを作っていました。ユーザーは、テキストを追加したり、ライブラリから選択した画像をアップロードしたり、独自の画像をアップロードしたりしてパターンを選択しました。私たちのプリントは、大判のHPインクジェットプリンタ（幅36インチと幅60インチ）に出てきました。最終的には、デベロッパーのリソースだけで$ 200kから$ 300kの間を費やしてしまいました...残念ながら、私たちが販売しなければならなかった価格は市場にとって高すぎました。

Answer 2

ajax呼び出しを使用して、ユーザー生成のコンテンツを含むdiv全体をサーバーに戻します。 'HtmlTextWriter'クラスを使用してサーバー上にHTMLドキュメントを生成します。 は、その後、あなたは次のように外部ツールを使用して、そのHTMLファイルを変換することができます

（1）http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot

（2）無料ツールではありませんが、あなたは、サーバー上で新しいプロセスを作成することによって、それらを使用することができhttp://html-to-image.acasystems.com/faq-html-to-picture.htm

。

Answer 3

サーバー側のツールを使用できる場合は、phantomjsにチェックを入れてください。これは、ページのスクリーンショットを取ることができるヘッドレスWebkitブラウザ（guiなし）で、javascript APIを使用します。それはトリックを行う必要があります。

Answer 4

私が出会った最良の選択肢はwkhtmltopdfです。 wkhtmltoimageというツールが付属しています。 QtWebKit（WebKitレンダリングエンジンのQtポート）を使用してWebページをレンダリングし、その結果を任意のPDFまたはイメージ形式に変換します。これらはすべてサーバー側で実行されます。

WebKitを使用しているため、最新のブラウザのようにすべて（画像、CSS、さらにはJavaScript）がレンダリングされます。私の使用例では、結果は非常に満足しており、ブラウザがレンダリングするものとほとんど同じです。起動するには

は、.NETで外部ツールを実行する方法を見てみたいことがあります。 Execute an external EXE with C#.NET