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 pletely create a new image from scratch.

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 pletely create a new image from scratch.

• javascript
• jquery
• image

Share Improve this question Follow asked Jan 26, 2022 at 16:06 rolingerrolinger 3,10611 gold badge3838 silver badges6969 bronze badges 2

• 3 You probably want a canvas - see plenty of SO questions on how to convert to an image. – fdomn-m Commented Jan 26, 2022 at 16:20
• @freedomn-m - thanks. I have not heard of the canvas object before. All my reading did not turn that up. I don't understand why this was down voted twice. Its a legit question - people down vote things because they assume I should know something (like canvas), but obviously posting the question implies that I do not. – rolinger Commented Jan 26, 2022 at 16:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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/en-US/docs/Web/API/Canvas_API

And a tutorial is here: https://developer.mozilla/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>

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>

Image can be represented as base64 encoded Data URL, so you can generate this URL and use it.

Example usage:

// Created by [email protected] at 2022/8/14
import React from "react";

function textToImageDataUrl(text: string): string {
    const canvas = document.createElement("canvas");
    canvas.width = 320 * 4;
    canvas.height = 180 * 4;
    const context = canvas.getContext("2d")!;
    context.rect(0, 0, 320 * 4, 180 * 4);
    context.fillStyle = "indigo";
    context.fill();
    context.font = "256px Consolas, Sans Serif";
    context.fillStyle = "orange";
    context.fillText(text, 80 * 4, 110 * 4);
    return canvas.toDataURL("image/png");
}

const TextImage: React.FC<{ text: string }> = ({text}) => {
    return <img alt="" src={textToImageDataUrl(text)}/>
}