Titaniumを使ってCanvas画像をファイルに保存します.

TitaniumでWebViewでcanvasで描いた画像をファイルに保存する方法を紹介します.
ユーザーがcanvasで描いた画像は、多くの場合、ファイルとして保存する必要があります.どうやってWebViewのcanvasデータをTitaniumに送るかには2つの方法があります.
1.htmlファイル(canvasタグを含む)では、JavaScript(Titanium.App.fireEvent)通信を介してcanvasのデータをこのイベントのパラメータとして送る.
2.TitaniumのJSではWebViewのevalJS方法のみで、htmlファイルから描画したcanvas画像データのJavaScriptを返すことができるように呼び出します.
第一の方法は前に述べました.ここでは第2の方法を説明します.
まず、canvasの画像データを返すことができるtoData URL()を使用する方法が必要です.しかし、一つの問題があります.toData URL()方法で返したのはbase 64で暗号化された文字列です.この文字列の先頭はmimetypeです.
例えば:
data:image/png;base 64、iVBORw 0 KGgo AAA ANSUhEUgAABcIA AAQCAYAAABK 7…
replace方式により、toDateURL()から返された文字列を処理します.mimetypeを除去したら、大体このような形です.
iVBORw 0 KGgo AAAANSUhEUgAABcIA AAQCAYAAABK 7…
内容を整理したら大体以下のような関数があります.

function output(){
    var cvs = document.getElementById( "stage" );
    var src = cvs.toDataURL("image/png").replace(/^.*,/,'');
    return src;
}

この関数で返した値は、変換してファイルに保存できます.

var result = webview.evalJS("output();");
var base64 = Titanium.Utils.base64decode(result);
var file = Titanium.Filesystem.getFile( Titanium.Filesystem.tempDirectory, "_TEMP_.png" );
file.write( base64 );

****
canvasが含まれているHTMLファイルは添付ファイルをご参照ください.