How to encode an image to base64 using jquery?

Question

I'm trying to encode an image (jpg) to base64 using IE9. I tried the following code:

var canvas = document.createElement("canvas");
    canvas.width = document.getElementById('myImage').width; 
    canvas.height = document.getElementById('myImage').height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(document.getElementById('myImage'), 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

I got the error : DOM Exception: SECURITY_ERR (18) when I call toDataURL method.

Any idea what I'm doing wrong here?

Thanks

possible duplicate of Base64 encoding and decoding in client-side Javascript — davidcondrey
– davidcondrey, Commented Sep 30, 2014 at 9:06

Jijo John · Accepted Answer · 2013-07-01 16:17:17Z

1

You need to use php or any other server side languages for encode an image to a base64 encoding.Use jquery ajax for this purpose , encode it on server side and pass it to the client side .

You can encode text to base64 encoding .There is a nice project in Codeplex Click here

Iam not sure you can encode images ,give a try .

answered Jul 1, 2013 at 16:17

Jijo John

1,3759 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vector · Accepted Answer · 2013-07-01 15:48:08Z

0

Due to same origin policy, you can't encode a canvas when you drew on it something coming from another origin than your page, except if :

the drawn image was served with relevant CORS headers
you serve it through a proxy so that the browser thinks it's the same origin

Note that if you open your page in file://, then any image will be seen as from another origin.

edited Jul 1, 2013 at 15:48

vector

7,6168 gold badges56 silver badges81 bronze badges

answered Jul 1, 2013 at 15:33

Denys Séguret

384k90 gold badges813 silver badges779 bronze badges

5 Comments

dandavis Over a year ago

wait, you "can't" encode it if was served with cors or a proxy?

Denys Séguret Over a year ago

You can't encode the image if it was served from another domain without CORS. If it was served with the right CORS header then it's fine.

Denys Séguret Over a year ago

@dandavis I'm not a native English speaker but doesn't "apart" convey the same meaning than "except" here ?

dandavis Over a year ago

well, it was enough that i didn't understand it without my morning coffee. you could say "apart from cases where" instead of "except if"...

Denys Séguret Over a year ago

@dandavis Thanks for that English lesson :)

Collectives™ on Stack Overflow

How to encode an image to base64 using jquery?

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related