HTML5 Canvas on webview really slow
After I take a picture on the iphone I have setup a temporary button to convert that picture to a string by passing the file to a html file where I draw it on the canvas and then use toDataURL to convert it to a string. That all works great but it takes 28 seconds which is unreasonably slow. Is there anyway this could be sped up???
I also can not get the activity indicator to work but apparently I'm not alone (http://developer.appcelerator.com/question/105751/activity-indicator-missing-in-iphone4).
Any suggestions would be greatly appreciated. I have tried using a timeout for the beforeload to load webview events based on a Q&A but that didn't make any difference. I really think it's the drawImage() and toDataURL() unfortunately. Note: The image file passed has already been resized to only 100 w by 100 h for speed using the ImageView and then toImage() but it still takes 28 seconds.
bConvert.addEventListener('click', function(){
var filename = Titanium.App.Properties.getString("filename");
var path = Titanium.Filesystem.applicationDataDirectory;
if (!Titanium.Filesystem.getFile(path, filename).exists()) {
alert('Don not have file');
return;
}
var fimg = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory, filename);
var imagePath = fimg.nativePath;
var actInd = Titanium.UI.createActivityIndicator({
height:50,
width:50,
style:Ti.UI.iPhone.ActivityIndicatorStyle.BIG
});
var webview1 = Titanium.UI.createWebView({
visible: false,
url: 'webview_takepicture.htm'
});
webview1.addEventListener('beforeload', function(e){
actInd.show();
});
webview1.addEventListener('load', function(){
actInd.hide();
Ti.App.fireEvent('pageReady', {id: imagePath});
});
win.add(webview1);
Ti.App.addEventListener('getBase64', function(e){
pic1 = e.str;
if (webview1) {
win.remove(webview1);
}
//actInd.hide();
alert(pic1);
});
});
<html>
<head>
<script>
Ti.App.addEventListener('pageReady', function(e){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function(){
context.drawImage(img, 0, 0);
var imgstr = canvas.toDataURL();
var base64 = {
str: imgstr
};
Ti.App.fireEvent('getBase64', base64);
}
img.src = e.id; //this calls img.onload
})
</script>
</head>
<body>
<canvas id="myCanvas" width="100" height="100">
</canvas>
<body>
</html>
2 Answers
-
I also have that problem.
Just loading a WebView as big as the screen of the tablet (Android).
The WebView is faster if I don't use many images or CSS3 tricks like shadow or rotation.Ok so I remove the shadows etc. but I need to show the user images taken with a camera. Images are shown in WebView in a smaller size than original (250x250px).
I don't know why its so slow when the normal browser on the same device renders the same website super fast.
Please help us here!
-
i just posted some code for a module to do this conversion, I know a patch is coming from appcelerator, but the module might be useful to you now.
Clearly Innovative Thoughts - Titanium Appcelerator Quickie: base64encode iOS Module