1

I'm trying to read a URL (the resource of which is an image) and encode this image in base64 to save it in a database.

I've looked around Google and Stackoverflow and a lot of people say that it is impossible to save a base64 formatted image that you read from a URL.(Are they wrong?)

My steps are as follows:

I parse an XML file where there is a URL for the image. I'm trying to save this image in a base64 format in a DB.

Can anybody help me?

Ry-
  • 218,210
  • 55
  • 464
  • 476
Francisco José Valero Berná
  • 45
  • 1
  • 10

1 Answers1

0

I can't readily put together an example of this, but it should be possible, assuming the image is coming from the same domain you are running the code on, or you can control the cross origin header for the image (or else you'll get a Cross-origin error).

Assuming this is the case, you can. Here is a JSFiddle where I encode the logo of JSFiddle: http://fiddle.jshell.net/5S6BY/ (since that logo is on the same domain as where the code is running, it works).

The trick is to draw it to a canvas, then convert that canvas to a base64.

Here is the code:

var url = "http://fiddle.jshell.net/img/logo.png";
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var image = new Image();
image.crossOrigin = 'anonymous';
image.addEventListener('load', function() {
    ctx.drawImage(image, 0, 0, image.width, image.height);
    document.body.innerHTML = canvas.toDataURL();
});
image.src = url;

It's pretty straight forward. Load the image, draw the image to the canvas, then call canvas.toDataUrl() to get the base64 encoded version, which you can use to do whatever you want.

samanime
  • 25,408
  • 15
  • 90
  • 139
  • Am I correct in thinking that `image.crossOrigin = 'anonymous';` means 'same domain'? – Agi Hammerthief Mar 11 '14 at 20:46
  • Oops, sorry. Apparently the fiddle code is not called in the same domain as JSFiddle is (apparently it is http://fiddle.jsshell.net). Interesting, if you visit that it works just like JS fiddle. Use the updated one I provided and it works. If the image is on the same domain as the code, it should work. – samanime Mar 11 '14 at 20:59
  • I'm not sure what you mean by "show a transparent image...!!". It should show text, not an image. – samanime Mar 11 '14 at 21:01
  • yes it is a text, but the problem is that I want to create a image with this base64 – Francisco José Valero Berná Mar 11 '14 at 21:11
  • To create an image, you just take that text and put it as the src of an image element. – samanime Mar 11 '14 at 21:13
  • yes, but how? my image is not create until I finish to read de xml file. My process is: I read a xml file where is the url image, I use your code to get the base64 code from this image and know, I want to save this base64 in a BD for after read de BD and create a . Do you understand me? – Francisco José Valero Berná Mar 11 '14 at 21:18
  • You would read your XML, load the URL in to an image element, then use my code to get the base64. You would take that string and store it in your database. Then, later, if you want to then turn that string in to an image, you simply take the string from the database and set it as the src for the for an . That's all it takes to turn the string back in to an image. – samanime Mar 11 '14 at 21:22
  • Can you update your question to include the code you are trying now? – samanime Mar 11 '14 at 23:46