Webページ制作ｊQuerｙに詳しい方に質問です。

質問

Web関係詳しい方質問お願いします。
人形に着せ替えをするという趣旨のサイトを課題で制作しています。
http://ksg.s190.coreserver.jp/kobe1/inoue/dressme/dress.html

今ここまで制作しているのですが、中央の人形に服を着せた後の状態で画像を保存（タグかid等一部指定で）できるような仕様にしたいのですが良いキャプチャの方法がわかりません。
html2canvasは試しましたが着せ替え前のキャプチャしか保存できませんでした。
良い方法があれば教えていただきたいです。
よろしくお願い致します。

回答No.1

tracer · ベストアンサー

アプローチはいろいろ考えられますが、画像保存を目的とした時、必ずしもキャプチャに限定する必要はないのではないでしょうか。
たとえば、組み合わせ数が少ないのであれば、あらかじめ全組み合わせの画像を用意しておき、組み合わせの結果に応じて、その画像を表示あるいはダウンロードさせればよいだけです。また、組み合わせ数が膨大な場合は、組み合わせの結果をサーバーに送信して、サーバー側で画像を生成するという方法も考えられます。更に、現在のサンプルはDOMレベルでアプリケーションを実装されていますが、最初からCanvasでつくることで、いわゆる画像を保存する作業はグッと楽になる、というよりCanvasにそういう機能が提供されています。

どうしても、今の状態でキャプチャを取りたいのであれば、html2canvasをカスタマイズする、あるいはhtml2canvasが使えるようにアプリケーションの実装を改修したほうが早いと思います。要するにjsによるレンダリング結果は考慮されないということでしょうから、jsからのレンダリング後にhtml2canvasが実行できるように修正するだけです。

もし、jQueryのプラグインの組み合わせのみでアプリケーションを実装しようとしてるならば、おそらく完成は難しいでしょう。質問者さんの制作レベルを超えていると考えるべきです。

お礼

詳しいお答えありがとうございます。canvasで制作を考えていこうと思います。大変勉強になりました。ありがとうございました！