从网址读取图片，并将其保存在html / phonegap中的base64中

Question

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?

Answer 1

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.