Question

179

Create base64 encoded images with JavaScript

rated 0 times [ 180] [ 1] / answers: 1 / hits: 22205 / 8 Years ago, tue, may 3, 2016, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dustin

Add To Favorites

Follow

Total Points: 599

Total Questions: 105

Total Answers: 106

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

dustin questions

1 'Routes' is not defined react/jsx-no-undef

Wed, Dec 1, 21, 00:00, 3 Years ago

1 event in Javascript is deprecated and I cannot use preventDefault()

Sun, Apr 18, 21, 00:00, 3 Years ago

1 playwright - issues with login form, inputs and submit click

Wed, Apr 14, 21, 00:00, 3 Years ago

1 How to mock fs.readFileSync with jest

Sun, Sep 20, 20, 00:00, 4 Years ago

1 How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?

Wed, Jul 8, 20, 00:00, 4 Years ago

View All

answered 8 Years ago alejandro · Accepted Answer

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