Forum Post: RE: Can a photo's base 64 string be retrieved from an image component?

  • Thread starter Thread starter mainroad1
  • Start date Start date
Status
Not open for further replies.
M

mainroad1

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

Continue reading...
 
Status
Not open for further replies.
Back
Top