Converting (non-base64) text strings to Base64 images

Question

So I'm just curious if this capability exists, though it may well not exist. I'm trying to take a string of text like 1 or 2323 and convert it into an image that has the text string as background. Nothing crazy about the image, just a placeholder image from a text string. Does this sort of capability exist? So far, I've only been able to find base64 generators for images that I already had, not images I wanted to generate on the fly.

(Bonus points for a solution in Javascript)

Dave · Accepted Answer · 2015-02-24T17:08:47.183

1

You can do this pretty simply without additional libraries if your browser supports HTML5 canvas.

function getTextImage(text) {
  var c = document.getElementById("canvas");
  var ctx=c.getContext("2d");    
  ctx.font="20px Georgia";
  ctx.fillText(text,10,50);
  var img = canvas.toDataURL("image/png");
  return img;
}
    
var yourText = "I'm an image";
document.write('<img src="' + getTextImage(yourText) + '"/>');

<canvas id="canvas" style="display:none;">
</canvas>

edited Feb 24 '15 at 17:08

answered Jul 23 '14 at 17:10

Dave

10,748
3
43
54

Yeah, that's a nice way to do it too. – Dylan Gattey Jul 23 '14 at 17:16

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

Actually, I figured it out by combining frameworks. Placehold.it has the ability to generate a sized image with custom text, and that combined with the trick outlined in this StackOverflow post does what I need it to in Javascript.

edited May 23 '17 at 10:24

Community

1
1

answered Jul 23 '14 at 16:48

Dylan Gattey

1,713
13
34

Converting (non-base64) text strings to Base64 images

2 Answers2