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.
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>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>