Create base64 encoded images with JavaScript

Question

Since images are data, we can write our code as

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

Now my point is: can we create that base64 data with javascript? Is there any framework for it?

My actual requirement is that I have a string like "Cow" and I want it as an image.

Note: I do not want a server call for it. I know I can call server side code by passing "Cow" as a parameter. My server side code can generate that image, but I want do this from the browser with JavaScript.

Solution 1

You can create an image with canvas. There are many canvas frameworks which can help you. Then you can "export" your canvas to base64 string.

Try this sample with jCanvas:

HTML

<p>
  Result:
</p>
<p>
  <textarea id="result" cols="60" rows="10"></textarea>
</p>
<p>
  <input id="click" type="button" value="Convert to base64">
</p>
<p>
  Canvas<br><canvas id="myCanvas" width="100" height="100"/>
</p>

JavaScript

$(function(){

  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 80, 80);

  $('#click').click(function() {
    $('#result').html($("canvas").getCanvasImage());
  });
});

Demo

Solution 2

 var element = new Image();
 element.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

If you wants to add id to your body:

 document.body.appendChild(element);

You have to use appendChild on the parent element of where you want to display the image. It will be automatically loaded.

Solution 3

I hope I got your question right. You want the actual data and not the uri??

I found this small snippet from MuniR, I think it is what you wanted.

The thing is we cannot seem to get away from the canvas, create it with the size of the image, paint the image and use the canvas object to store it!!-Not necessarily USE it... Hope it helps, and good luck

function getBase64FromImageUrl(url) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");

        alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
    };

    img.src = url;
}

Comments

[Partha Sarathi Ghosh]

Here you have the image data. I do not want to create the DOM. I want to create the image data.

[Partha Sarathi Ghosh]

Yes. This seems a feasible option.

[TheStoryCoder]

Answering a question that wasn't asked at all.

[TheStoryCoder]

Question was not to get base64 data from an existing image but you are actually still answering the question and basically should be the accepted answer since the solution doesn't require an additional framework like @AliMamedov's answer does. The crucial part here is the onload function and essentially canvas.toDataURL("image/png") is the magic needed.