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?
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?
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.getContext("2d");
ctx.drawImage(img[0], 0, 0, width, height);
//Get base64String.
var base64String = c.toDataURL();
//Using base64String.
console.log(base64String);
alert(base64String);
//Set this picture to other image component to be sure picture is ok.
Apperyio("mobileimage_2").attr("src", base64String);
/code/pre
Regards
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.
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(){
//Place code here is a code.
};
window.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.
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.
Hello Gordon!
I'm sorry, but you would need to contact Progress support.