ITエンジニア/デザイナ向けにオープンソースを毎日紹介

todataurl-png-jsはAndroid 2.x系でCanvasタグのtoDataURLをサポートするJavaScriptライブラリです。Canvasタグの内容をPNG画像として出力できます。

todataurl-png-jsはAndroid 2.x系においてCanvasタグに描いた内容をdataURIとして画像で取り出した上で再利用できるようにするJavaScriptライブラリです。


例です。自分で描いた模様をバックグラウンドに設定しています。


こちらはCanvasタグに生成した画像を背景に使っています。

実際のコードです。CanvasのデータをtoDataURL()で取り出してバックグラウンドイメージに適用しています。

toDataURLメソッドはHTML5対応のWebブラウザであれば使えるかと思っていましたが、Android 2.x系のWebブラウザでは使えないそうです。そこでtodataurl-png-jsを使えばBase64エンコードされたPNG画像を取得できるようになります。

todataurl-png-jsはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。


MOONGIFTはこう見る

HTML5は現在は確定していますが、それでもなおWebブラウザによって実装されている機能に差があります。WebSocketのように仕様から外れてしまった機能は特にその傾向が顕著です。そのような状態では積極的に使っていくのは困難と言えるでしょう。

しかしその差を埋めるのもまた技術と言えます。HTML5やそのAPIをレガシーなWebブラウザでも使えるようにする技術はたくさん出てきています。そうしたライブラリを把握しておけばいざという時に慌てずに済むでしょう。特にAndroidでは2.x系がまだまだ主流なのでtodataurl-png-jsが活躍できる場面も多そうです。

デモ1:My Canvas page

デモ2:Canvas to dataURL to CSS

todataurl-png-js - A Javascript-based Canvas.toDataURL implementation for Android - Google Project Hosting

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2