介绍在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
如:
[color=red][size=large]data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABcIAAAQqCAYAAABk7....[/size][/color]
通过replace方法将toDateURL()返回的字符串进行处理。消除mimetype之后,大概是这个样样子的:
iVBORw0KGgoAAAANSUhEUgAABcIAAAQqCAYAAABk7....
处理内容整理后大概是以下这样的一个函数:
通过这个函数返回的值,我们变换后就能保存为文件了。
******
包含有canvas的HTML文件详见附件!
用户通过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
如:
[color=red][size=large]data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABcIAAAQqCAYAAABk7....[/size][/color]
通过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文件详见附件!