Can a photo's base 64 string be retrieved from an image

first, you should determine whether the localstorage variable actually /are/ wasting memory (i have no idea, sorry). if they aren't, then you don't have a problem that needs solving.

I'm sorry it was a mistake on my part to raise the question of memory usage.  That distracts from the question I am trying to find an answer for.

Please, does anyone know if the original base 64 string for the photo can be retrieved from an image component... and if so... then how?

Would the answer suggested at stackoverflow.com/.../how-to-convert-image-into-base64-string-using-javascript  work for you?

-- peter

Hi Peter:

Thanks for the reply.  That looks close to what I need.  I'm just a bit stumped on how to feed an image component into that code...

Any ideas are surely welcome :)

Cheers,

gord (mainroad1).

Is there any way of finding out how much memory / resources local storage variable are using?  Are they "garbage collected" once you exit the app?

Hello Johncat:

If you wish to discuss memory usage it would be best to create a new post for your question rather than pursue it in this one.  It is a worthwhile topic and I'd encourage you to do so.  It was a mistake on my part to mention it in my original posting as it distracts from what I wanted this post to focus on.  I have now edited my original post to remove the reference.

Cheers,

gord (mainroad1).

Hi gord,

You can create an Image object and set its src property:

var img1 = new Image(); // HTML5 Constructor
img1.src = 'image1.png';  //

Where that string name comes from depends on your app.  If you've uploaded the image into the Mobile AppBuilder, then you can extract it with this code

Tiggzi.getImagePath(value);

Where value needs to match the name of the image in the Media Manager.

-- peter

Hi Peter:

Thanks again for your suggestions.

Here's what I've tried and learned:

In my test app I have image components 'Page1_Image1' and 'Page1_Image2'.

I also have a localStorage variable 'Image1Base64'.

A button is used to invoke the camera service which assigns a base 64 image string to 'Page1_Image1' and to localStorage.Image1Base64.

If I run the code listed at the bottom of this post after the camera service has been invoked:

- a base 64 string is extracted from image component 'Page1_Image1', and

- the extracted base 64 string is copied to image component 'Page1_Image2'.

Unfortunately, there are problems:

1. The extracted base 64 string is much smaller than the base 64 string saved in localStorage.  I assume this is because the image component does not keep all the resolution of the original image.

2. The logic to extract the base 64 string from the image component only works if it is on the same page as the image component.  If you try to run it from another page within the app while referring to the image component on page 1 then it fails.

I suspect there is no way to improve on problem 1.

There might be a workaround for problem 2, but problem 1 is enough to make me decide it's not worth looking for.

Cheers,

gord (mainroad1).

alert('Appery.getImagePath(Page1_Image1): ' + Appery.getImagePath('Page1_Image1') + '\n\n' +

     'length of localStorage.Image1Base64: ' + localStorage.Image1Base64.length + '\n\n' +

     'first 50 chars of localStorage.Image1Base64: ' + localStorage.Image1Base64.substring(0,50));

// Extract the base 64 string of the photo from the first image component.        

var img = Appery("Page1_Image1");

var width = img.width();

var height = img.height();

var canvas = jQuery('<canvas width="' + width + '" height="' + height + '"></canvas>');

var c = canvas[0];

var ctx = c.getContext("2d");

ctx.drawImage(img[0], 0, 0, width, height);

var base64String = c.toDataURL('image/png', 1);

alert('length of base64String extracted from image component using Appery code: ' + base64String.length + '\n\n' +

     'first 50 chrs of base64String extracted from image component using Appery code: ' + base64String.substring(0,50));

//Set this photo to the second image component to be sure the photo is ok.

Appery("Page1_Image2").attr("src", base64String);