Webview Canvas.ToDataURL conversion to a valid PNG (and then save to local gallery)

You must Login before you can answer or comment on any questions.

Hi Gurus, my app is currently rendering a few simple polygons using Webview's canvas. I want to save the output of my webview as a png. I am aware of

var image=webview.toImage();
Ti.Media.saveToPhotoGallery(image);
which works perfect. However, it only saves whatever fits the viewport of iphone. In other words, if my rendering takes up 1000x1000 pixels, the approach above will clip that output and only save a portion of it. I need it to save the whole rendering. So i embarked on using the following approach. In my javascript, i execute the following :
var GetPNG=function()
{
    var canvas = document.getElementById("myCanvas");
    return(canvas.toDataURL("image/png"));
}
then, in titanium i receive the string by doing :
var fromCanvas = webview.evalJS("GetPNG();");
Ti.API.info(fromCanvas);
This is how the string ends up looking : (the ... mean that the full string is obviously much larger
[INFO] data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAYAAAC+ ...
i now massage the string in order to get rid of the header :
var stripped = fromCanvas.replace("data:image/png;base64,","");
Ti.API.info(stripped);
i get the following output:
[INFO] iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAYAAAC+ ...
Next i apply base64 decoding :
var decoded = Ti.Utils.base64decode(stripped);
Now, when i try to save the decoded string into gallery, nothing happens. Also, when i peak at the height and width of my "image", i get 0 for both
Ti.API.info('IMAGE H = ' + decoded.height);
Ti.API.info('IMAGE W = ' + decoded.width);
Ti.Media.saveToPhotoGallery(decoded);
Has anyone tried this approach? Is there anything obvious i am doing wrong, or omitting to do?

Thank you for any insight you can shed on this issue. ~Jan

PS: Please go easy on me ... I am a complete newbie.

— asked 1 year ago by Jan Bob
0 Comments

1 Answer

Accepted Answer

Yah I experienced the same issue in my previous project. Ti.Media.saveToPhotoGallery() did not work with blob data, but work if I store it to a file, then saveToPhotoGallery with that file.

Check sample code here.

Best,

Minh

— answered 1 year ago by Minh Nguyen
answer permalink
2 Comments
  • Minh, thank you so much. your suggestion worked on the very first try :) ~Jan

    — commented 1 year ago by Jan Bob

  • Thank you!

    — commented 1 year ago by Diana Diana

Your Answer

Think you can help? Login to answer this question!