Convert Text to Image Using JavaScript

Convert Text to Image using javascript

You can do this using a hidden canvas element and converting that to an image using toDataURL. Your code would look something like this:

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas
    imageElem = document.getElementById('image'); //Image element
  
// Text input element
document.getElementById('text').addEventListener('keyup', function() {
  tCtx.canvas.width = tCtx.measureText(this.value).width;
  tCtx.fillText(this.value, 0, 10);
  imageElem.src = tCtx.canvas.toDataURL();
  console.log(imageElem.src);
}, false);

canvas{
    border: 1px black solid;
}
#textCanvas{
    display: none;
}

<canvas id='textCanvas' height=20></canvas>
<img id='image'>
<br>
<textarea id='text'></textarea>

How to convert text to image with font style using javascript?

You need to set your context's font property. Its default value is '10px sans-serif', and this property doesn't support 'inherit' value _{(unlike direction)}.

But since you are resizing your canvas, there is a little thing you need to be aware: setting either the width or height property of your canvas will reset all the properties of your context. So, we need to set this font property twice, before measure the text and after setting the canvas size.

Also, note that you should probably wait for your font has loaded, using the FontFaceSet API:

var tCtx = document.getElementById('textCanvas').getContext('2d'),  imageElem = document.getElementById('image');
var font = '400 50px "Fredoka One script=all rev=2", "Adobe Blank"';
document.fonts.load(font)  .then(function() {    document.getElementById('text').addEventListener('keyup', function() {      // Set it before getting the size      tCtx.font = font      // this will reset all our context's properties      tCtx.canvas.width = tCtx.measureText(this.value).width;      // so we need to set it again      tCtx.font = font;      // set the color only now      tCtx.fillStyle = '#A0A';      tCtx.fillText(this.value, 0, 50);      imageElem.src = tCtx.canvas.toDataURL();    }, false);  });

.xx {  font-family: "Fredoka One script=all rev=2", "Adobe Blank";  font-weight: 400;  font-style: normal;  font-size: 50px;}
@font-face {  font-family: 'Fredoka One script=all rev=2';  font-style: normal;  font-weight: 400;  src: url(https://fonts.gstatic.com/l/font?kit=k3kUo8kEI-tA1RRcTZGmTmHEG9St0C3d1om8Mz6slqBKRtvjzUJ6xAJaGHLTbv9tHVEq-h1ylCtXSeDBENILlzkfzUJOiM594gqLtnzccnJfhpQc-ZP_ud1_NbotCXKqzPs_SH7xk6cjQyW2echUD_r7vTfZ5gJBot49AddTHjLYLXysgiMDRZKV&skey=fac42792a60c2aba&v=v5) format('woff2');}
canvas {  border: 1px black solid;}
#textCanvas {  display: none;}

<canvas class="xx" id='textCanvas' height=65></canvas><img id='image'><br><textarea id='text'></textarea>

Converting HTML text to an Image- Javascript

window.onload=function(){  $("#show_img_btn").on("click", function () {    var canvas = document.createElement("canvas");    canvas.width = 620;    canvas.height = 80;    var ctx = canvas.getContext('2d');    ctx.font = "30px Arial";    var text = $("#the_text").text();    ctx.fillText(text,10,50);    var img = document.createElement("img");    img.src=canvas.toDataURL();    $("#show_img_here").append(img);    //$("body").append(canvas);  });};

canvas{  border: 1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><head></head><body><div id="the_text">Hey! Im a text! I will be converted to an image</div><button id="show_img_btn">Convert to Image</button><div id="show_img_here"></div></body>

Javascript - How to convert text into image

html input or textarea cant manage different styles within their value, you can use a wysiwyg like this then extract the html and parse it.

based on my example link you can do this:

jQuery('.wysiwyg-editor').contents()

this will return an array with every html elements, then use what you ve tryed before.

Hope this help

How to convert from image to text using Javascript

If you attach an event listener to the file input, you can then recognize text once the file has been loaded successfully, like so:

<html>
<body>

<input type="file" id="myFile" name="filename">  
<br><br>

<label><b>Your Converted Text:</b></label><br><br>

<textarea cols="30" name="original" rows="10" style="width: 100%;" id="convertedText">
</textarea>

<script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script>

<script>  

    var myFile = document.getElementById('myFile');
    myFile.addEventListener('change', recognizeText);

    async function recognizeText({ target: { files }  }) {
        Tesseract.recognize(files[0]).then(function(result) {
            console.log("recognizeText: result.text:", result.text);
            document.getElementById("convertedText").value = result.text;
        });
    }

</script>
        
</body>
</html>

Convert Text to Image Using JavaScript