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

Posted by mainroad1 on 14-May-2014 13:50

Can a photo's base 64 string be retrieved from an image component? If so then could someone please show me the JavaScript to do it?

At current my app has many camera services and each is mapped to an image component and a localStorage variable. The image components display the photos, and if the photos need to be saved I send the localStorage base 64 strings back to the Progress db.

If I could extract the base 64 strings from the image components then I could eliminate most of the localStorage variables, but is that possible?

Posted by mainroad1 on 20-May-2014 12:08

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);

All Replies

Posted by gus on 14-May-2014 18:11

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.

Posted by mainroad1 on 14-May-2014 18:49

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?

Posted by Peter Judge on 15-May-2014 09:19

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

-- peter

Posted by mainroad1 on 15-May-2014 14:17

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).

Posted by johncat on 16-May-2014 10:17

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?

Posted by mainroad1 on 16-May-2014 12:51

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).

Posted by Peter Judge on 19-May-2014 11:04

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

Posted by mainroad1 on 20-May-2014 12:08

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);

This thread is closed