How to get base64 encoded data from html image

Question

I have a registration form where users can choose an avatar. They have 2 possibilities:

1. Choose a default avatar
2. Upload their own avatar

In my HTML page I have this.

<img id="preview" src="img/default_1.png">

It displays the chosen avatar. I use the File Api to let users upload their own image. That makes the src of the HTML image to something like this.

<img id="preview" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... />

When they post the registration form. The data will be sent to a REST service. I can send the base64 encoded data when a user uploaded an avatar himself. But how do I handle the default avatar? It is an url instead of base64 encoded data.

Motet

Simply convert the default avatar to base64 image – Shooter

Here I was playing with jsFiddle, loading img from <img> tag in canvas an doing .toDataURL(). – Habitude

Answer 1

You can try following sample http://jsfiddle.net/xKJB8/3/

<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<canvas id="myCanvas" />

---

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
alert(c.toDataURL());

Shooter

Nice code! One more question. Will the base64 output always be assumed to be PNG data (does the Canvas instance 'convert' the image data?), if so, is there a way to identify the image's real data type (magic numbers?) and change the resulting base64 protocol declaration? – Sadler

I (begrudgingly) accept that we need to create a canvas element in order to generate the encoding, however my preference would be to generate it in js rather than having to litter view code with placeholders (my use case requires a few images) - like this similar answer: https://mcmap.net/q/179589/-convert-image-from-url-to-base64 – Execution

What if the src is an svg image – Skittle

Can you please make it work with URL img.youtube.com/vi/gs415cKPASA/maxresdefault.jpg. It throw an error, "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." – Rudderpost

Answer 2

You can also use the FileReader class :

    var reader = new FileReader();
    reader.onload = function (e) {
        var data = this.result;
    }
    reader.readAsDataURL( file );

Underwrite

But then, the file will need to be in blob format :/ – Specular

The question is, how to get base64 from image element, Not from file path – Alpers

Answer 3

A simple javascript function can do the job

function getImgBase64(imgSelector){
  var image = document.querySelector(imgSelector);
  var canvas = document.createElement("canvas");
  canvas.width = image.naturalWidth;
  canvas.height = image.naturalHeight;
  var ctx = canvas.getContext("2d");  
  ctx.drawImage(image, 0, 0);
  return canvas.toDataURL();
}

Doggery