2014.05.03

html + jsで作ったグラフィックをサーバに保存する

描いた花を、壁紙やSNSアイコンに使ってもらうため、サーバに画像として保存し、
ダウンロードさせる機能を実装させようとしていたところ、問題発生。

「htmlをそのまま画像化するやり方」がいくら検索してもでてこない。
出てくるのは「canvasを画像化する」やり方のみ。
flashでは比較的簡単にできたため、安易に考えていたのですが、
よくよく考えたら、画像にするには一旦ビットマップに変換する必要があり、
普通のhtml&jsにそんな機能がある訳が無い。

「まさかhtmlベースで作成したものをやめ、
 一からcanvasベースで作り直し…?」

と不安に思いつつ諦めずに探したら、
こんな素晴らしいものを見つけました。

http://html2canvas.hertzen.com/

htmlを無理矢理canvasに変換してくれるツールです。
(一体なんのためにつくったんだろう…)
まさに求めていたものが見つかったので、
なんとかテストで実装できました。(※PC推奨)

http://letter-pod.com/test3/

見せるように作ってないので分かりにくいですが、
下記の感じで確認できます。

・フォームに適当な文字をいれて、drawボタンをおす
 文字花が描画される。上でドラッグすると通常テキストでできている事がわかります。

・「canvasに変換」をおす
 左上に描いた文字花と同じものが出現。ドラッグできず、canvasである事がわかります。

・「pngに変換、サーバに保存」をおす
 右上に同じ文字花が出現。ドラッグすると、画像である事がわかります。

・「画像を表示」をおす
 別タブで画像が表示されます。サーバに描画した画像が保存されていることが分かります。

…それで?って思うかもしれませんが、
結構大事な部分なんです。
休日一日使ってがんばりました…。

Categoly : program