Leonardo Valentin Zeferino
Posts: 0
Joined: Fri May 29, 2015 2:07 pm

Retrieving photo base 64 string from an image component

Hi!

I'm trying to get a base64 of an image and use in uploadBinaryHelper with the code bellow.

code//Get img component. You should replace "mobileimage_1" with your img component name.
var img = Apperyio('item_img_61');
img.attr('crossOrigin', 'anonymous');
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;var base64String = "data:image/png;base64," + c&#46;toDataURL();
&#47;&#47;Using base64String&#46;
console&#46;log(base64String);
alert(base64String);

uploadBinaryHelper(webUploadCheckin, base64String);
/code

But occoured the follow error:

codeUncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported&#46;/code

Could you help me?

Leonardo Valentin Zeferino
Posts: 0
Joined: Fri May 29, 2015 2:07 pm

Retrieving photo base 64 string from an image component

Thanks, Sergiy!

I had forgotten the crossorigin property in image tag.

code<img id="xxx" crossorigin="anonymous" src="xx">/code

Thanks!

Joe7349603
Posts: 0
Joined: Tue Jan 27, 2015 11:08 pm

Retrieving photo base 64 string from an image component

Leonardo,

I have similar issue, if you don't mind sharing, where did you stick the line above, how did you final solution end up looking like?

Joe Sharples
Posts: 0
Joined: Mon Aug 18, 2014 1:31 pm

Retrieving photo base 64 string from an image component

Hi,
did you find a final solution for this?

Return to “Issues”