使用Titanium将Canvas图像保存为文件

介绍在Titanium中，将WebView中通过canvas绘制的图像保存为文件的方法。

用户通过canvas所绘制的图像，在很多时候需要保存为文件。如何将WebView的canvas数据传递给Titanium有2个方法。

1.在html文件中（包含canvas标签的html文件）通过JavaScript（Titanium.App.fireEvent）通信将canvas的数据作为该事件的参数传递过去。

2.在Titanium的JS中只用WebView的evalJS方法，调用html文件中能够返回绘制的canvas图像数据的JavaScript。

第一种方法以前提到过了。这里我们说说第2中方法。

首先我们需要使用能够返回canvas的图像数据的toDataURL()方法。但是有一个问题是toDataURL()方法返回的是通过base64加密的字符串，在这段字符串的开头是mimetype

如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABcIAAAQqCAYAAABk7....

通过replace方法将toDateURL()返回的字符串进行处理。消除mimetype之后，大概是这个样样子的：

iVBORw0KGgoAAAANSUhEUgAABcIAAAQqCAYAAABk7....

处理内容整理后大概是以下这样的一个函数：

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文件详见附件！

评论

2 楼 rensanning 2013-01-16  

Ti.App.fireEvent("someEvent", {img_data:document.getElementById("stage").toDataURL("image/png")});

1 楼 白衣卿相 2013-01-15  

1.在html文件中（包含canvas标签的html文件）通过JavaScript（Titanium.App.fireEvent）通信将canvas的数据作为该事件的参数传递过去。

求这个怎么实现的？
QQ：1003949351
谢谢！