html5 image blob读取,javascript - html image blob to base64 - Stack Overflow

A lot of misconception here.

your variable blob is not a Blob, but a string, the url of .file-preview-image.

FileReader can't do anything from this string. (Or at least not what you want).

in the onload callback of the FileReader, you are just checking if the result is equal to an undefined variable dataURI. That won't do anything.

you are trying to console.log the call to readAsDataURL which will be undefined since this method is asynchronous (you have to call console.log in the callback).

But since I guess that what you have is an object url (blob://), then your solution is either to get the real Blob object and pass it to a FileReader, or to draw this image on a canvas, and then call its toDataURL method to get a base64 encoded version.

If you can get the blob :

var dataURI;

var reader = new FileReader();

reader.onload = function(){

// here you'll call what to do with the base64 string result

dataURI = this.result;

console.log(dataURI);

};

reader.readAsDataURL(blob);

otherwise :

var dataURI;

var img = document.querySelector(".file-preview-image");

var canvas = document.createElement('canvas');

canvas.width = img.width;

canvas.height = img.height;

canvas.getContext('2d').drawImage(img, 0,0);

dataURI = canvas.toDataURL();

But note that for the later, you'll have to wait that your image actually has loaded before being able to draw it on the canvas.

Also, by default, it will convert your image to a png version. You can also pass image/jpegas the first parameter of toDataURL('image/jpeg') if the original image is in JPEG format.

If the image is an svg, then there would be an other solution using the element, but except if you really need it, I'll leave it for an other answer.