2014年09月19日

【需要は無いのかな?】CANVASの背景ごとデータ化したい時

昔やっていた「音楽ファンタジーゆめ」の動画を見た所、
「天国と地獄」に大ハマリの息子。
「バーイ、オッフェンバック!!!」と最後の部分まで叫びます。ジャンボです。



HTML5にちょっと色々と手を出しています。
HTML5といえば、やはり、CANVAS機能ですね。

画像の加工や合成をはじめ、
JavaScriptと組み合わせたお絵かき機能など、
詰め込めるとクライアントサイドだけで色々と出来そうです。

CANVAS機能には画像を取り込める機能もあるのですが、
それを背景に利用しようとして取り込んだ場合、
クリア時に背景も一緒にクリアされてしまう問題があります。

そこで、CSSのbackground-imageを使って、
CANVASの要素とは独立して背景を設定する事により、
その問題は解決できる訳です。


・・・で、それで問題なしかと思うのですが・・・
toDataURL()メソッドを使って、データ化しようとすると、
背景は真っ白で出力されてしまうんですね・・・。

まあ、canvasの要素にしていないので、当たり前といえば当たり前なのですが。

Webサイトで見る限りでは問題ないのですが、実画像とするには困ります。
調べても見つからず、何とか自己解決をしたので、以下に記載します。



【HTML5 CANVAS の描画内容を背景も含めて画像化する方法】

1) とりあえず、CANVAS領域を確保

2) 背景画像のURLを別途 hidden などで退避
  css の値を取る様にするのもアリなんですが、
  url("〜") の表記を取り除くのが結構、めんどいので、
  それくらいならと別途用意しておきました。

3) CANVAS領域に適当に作図

4) 画像出力直前に「globalCompositeOperation プロパティ」を「destination-over」に変更
 これで、作図していない領域のみ、画像を適用させることができます。

5) CANVAS領域一杯に背景画像を描画

6) 描画した内容をtoDataURL()メソッドで画像変換


・・・で、実際に作ったのがコチラ

HTML5 + Canvas非対応です





※ 実際に描画された画像です (右クリックでダウンロードしてみてください)。
右クリックでダウンロードできます


ソースはこちら



意外にとんでもなく、時間がかかりました。


posted by ジャンボ at 00:38| Comment(1) | TrackBack(0) | 雑記:PC | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
とりあえず、動作確認したのはIEとChrome。iPhoneじゃダメみたい。
Posted by ジャンボ at 2014年09月19日 01:08
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック