javascript create image from text using fonts, background and text colors

Question

I have been looking high and low for a Javascript framework or any JS code that will allow me to create an JPG or PNG image on the fly, but I can't seem to find any. I need to create an image using a selected background color, user entered text words, a selected font and then a selected text color. Once the image is created I then need add it the current HTML form page, and then pass the image to my server when the form is submitted. But all I am finding is stuff to manipulate an existing image, so is my request even possible?

I know I can create an image and append it to and existing page using something like the following:

$('#container').append($('<img>', { 
    src : "/path/to/image.jpg", 
    width : 16, 
    height : 16, 
    alt : "Test Image", 
    title : "Test Image"
}));

Or....

var img = document.createElement('img');
img.src = 'my_image.jpg';
document.getElementById('container').appendChild(img);

But both of those options requiring using an existing image....I need to be able to completely create a new image from scratch.

Answer 1

Here's a simple example of drawing to a hidden canvas, then copying the resulting image data to an image element. Once this element is created it can be copied, saved etc.

A useful resource for the Canvas API is here:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

And a tutorial is here: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

function drawHelloWorld(canvas) {
    const ctx = canvas.getContext("2d");
    
    // Draw the background
    ctx.rect(0, 0, 250, 100);
    ctx.fillStyle = "green";
    ctx.fill();
 
    // Draw the text
    ctx.font = "30px Helvetica";
    ctx.fillStyle = "ghostwhite";
    ctx.fillText("Hello World", 50, 60);
}

const canvas = document.getElementById('myCanvas');
drawHelloWorld(canvas);

const imgElement = document.createElement('img');
imgElement.src = canvas.toDataURL('image/jpeg');
document.getElementById('container').appendChild(imgElement);

<canvas hidden id="myCanvas" width="250" height="100" style="border:1px solid #d3d3d3;">
</canvas>

<div id="container">
</div>

Answer 2

You can make a new image from scratch by using JavaScript Canvas.

Something like this:

<canvas id=canvas width=500 height=500></canvas>
<script>
     window.onload = function() {
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");

        // This fills the background
        ctx.fillStyle = "green";
        ctx.fillRect(0, 0, 500, 500);

        // Add text with spesific font
        ctx.font = 'bold 48px serif';
        ctx.strokeText('Made on Fly!', 50, 100);

        // Make canvas to data URI
        const dataUrl = canvas.toDataURL("image/png");
        // Here you can convert dataUrl to base64 and use it for other purposes

        const aDoc = document.createElement("a");
        aDoc.href = dataUrl;
        aDoc.download = "Made_on_fly.png";
        document.body.appendChild(aDoc);
        // Make a element click for download
        aDoc.click();
     }
</script>