I'm looking for an elegant way to convert an existing <img> on the document to base64 loaded <img>. So simply the src url will be converted to base64 data.
What's the best way to obtain this?
Asked
Active
Viewed 173 times
0
-
1draw the image on a canvas, use canvas.toDataURL() – dandavis Jun 29 '15 at 00:53
-
2Do you really want to do that on the client side (as your tags indicate)? Why? – Bergi Jun 29 '15 at 00:54
-
only to hide the image url from the average user – Mia Jun 29 '15 at 00:55
-
you can still right-click, Save Image As... – dandavis Jun 29 '15 at 00:58
-
@dandavis i know, this is only to hide the url. – Mia Jun 29 '15 at 00:59
-
@dandavis also I am getting a "Tainted canvases may not be exported." error. – Mia Jun 29 '15 at 00:59
-
1you can only convert images you serve or control the serving of using CORS http headers – dandavis Jun 29 '15 at 01:00
-
hmm I see. So this won't work? https://gist.github.com/anonymous/31c074397e3b879e9da3 – Mia Jun 29 '15 at 01:01
-
Is there any way to realize what I need? – Mia Jun 29 '15 at 01:07
-
1this jsfiddle has a nice demo http://jsfiddle.net/handtrix/YvQ5y/ – Amr Morsy Jun 29 '15 at 01:37
-
Can create stacksnippets, jsfiddle http://jsiffle.net including `img` with `src` attempting to convert to `base64` ? – guest271314 Jun 29 '15 at 01:42
-
@Zettam: You cannot "hide urls" on the web. The user would just need to press `Ctrl`+`U` to view the source, and have access to all your urls. Even average users can do this nowadays. – Bergi Jun 29 '15 at 02:32
-
@Bergi i know, jsut take this as a personal challenge. – Mia Jun 29 '15 at 15:28
-
@AmrMorsy here is an edited version of that http://codepen.io/anon/pen/mJpGdm which works okay, but does not load "gif's" in an animated manner. – Mia Jun 29 '15 at 15:29
-
Possible duplicate of [Get image data in JavaScript?](http://stackoverflow.com/questions/934012/get-image-data-in-javascript) – YakovL Jun 07 '16 at 23:28
1 Answers
0
I've managed to make this work! (I got the same issue.) In the code below, img is the image DOM element:
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
img.crossOrigin = "anonymous";
canvas.getContext('2d').drawImage(img, 0, 0);
var dataUrl = canvas.toDataURL('image/png');
The line img.crossOrigin = "anonymous"; helps to bypass CORS somehow, although I'm not sure if that's a "hack" and may be "fixed" at some point as I don't fully understand the issue with CORS here.
