Retrieving photo base 64 string from an image component

[Gordon Duddridge]

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

[Yurii Orishchuk]

Hi Gordon.

Please use this code to get base64 url string from your image component:

precode

//Get img component. You should replace "mobileimage_1" with your img component name.
var img = Apperyio("mobileimage_1");

var width = img.width();
var height = img.height();

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

var c = canvas[0];
var ctx = c&#46;getContext("2d");

ctx&#46;drawImage(img[0], 0, 0, width, height);

&#47;&#47;Get base64String&#46;
var base64String = c&#46;toDataURL();

&#47;&#47;Using base64String&#46;
console&#46;log(base64String);
alert(base64String);

&#47;&#47;Set this picture to other image component to be sure picture is ok&#46;
Apperyio("mobileimage_2")&#46;attr("src", base64String);

/code/pre

Regards

[Gordon Duddridge]

Thanks for the quick reply Yurii.

I'm having problems making your code work and I hope you can offer more advice.

The first problem I encountered was on the first line where it appeared that 'Apperyio' was undefined for me and caused an abnormal termination of my app. I changed it to be simply 'Appery' and the error went away.

The code still didn't work and I inserted an alert before each line to see how it was progressing. This is what my copy of the code now looks like:

alert('About to assign img from Appery');
var img = Appery("VIimage0");
alert('About to assign width from img.width... img: ' + img);
var width = img.width();
alert('About to assign height from img.height... width: ' + width);
var height = img.height();
alert('About to assign canvas from jQuery... height: ' + height);
var canvas = jQuery('');
alert('About to assign c from canvas[0]');
var c = canvas[0];
alert('About to assign ctx from c.getContext(2d)');
var ctx = c.getContext("2d");
alert('About to ctx.drawImage');
ctx.drawImage(img[0], 0, 0, width, height);
alert('About to assign base64String from c.toDataURL()');
var base64String = c.toDataURL();
alert(base64String);

When I run this code I get the following alert output:

About to assign img from Appery
About to assign width from img.width... img:[object Object]
About to assign height from img.height... width: null
About to assign canvas from jQuery... height: null
About to assign c from canvas[0]
About to assign ctx from c.getContext(2d)
About to ctx.drawImage

Apparently there is an error when ctx.drawimage is reached, because the alerts that follow do not execute. I do use the camera to assign a photo to component 'VIimage0' before running the code.

Is there anything else you can suggest to help make this work?

Thank you,
gord.

[Yurii Orishchuk]

Hi Gordon.

Thanks for your debugging.

In accordance to your log - your img component not initialized with content(image) when you execute this code.

Try to wrap this code in delay code(it will execute this with 2sec delay):

precode

var onDelay = function(){
&#47;&#47;Place code here is a code&#46;
};
window&#46;setTimeout(onDelay, 2000);

/code/pre

Also please give us your app public link if you can not to find a reason of this problem.

Regards.

[Gordon Duddridge]

Hello Yurii:

I found the problem and I have 2 questions about it.

The code you gave me only works if it is run from the page that has the image component.

Question 1. Is there a way to retrieve the original base 64 string of a photo from an image component that is on a different page?

My app has many pages with image components. On the final page the user can choose to submit a report and I want the report to include the base 64 strings of the photos. I had hoped that I could retrieve the base 64 strings of images on prior pages while I was on the final page.

Currently I am saving every photo the user takes to localStorage so that I will have access to them on the final page, but I think the amount of memory that is using is threatening to crash my app. I was hoping I could reduce the use of localStorage by retrieving the photos from the image components.

I have noticed that when I use the code you provided to retrieve a photo from an image component, the size of the retrieved base 64 string is much smaller than the photo's original base 64 string.

Question 2. Is there a way to retrieve a photo from an image component without losing photo quality?

If you wish to see what I'm doing, I have created a 'PhotoTestApp' to demonstrate what I'm trying to accomplish. I have marked it as public and sent an email to a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a to show the link.

Thanks,
gord.

[Maryna Brodina]

Hello Gordon!

I'm sorry, but you would need to contact Progress support.