function processImage(originalImg, textOverlay = "Recht gut, mein lieber Junge!") {
const canvas = document.createElement('canvas');
canvas.width = originalImg.width;
canvas.height = originalImg.height;
const ctx = canvas.getContext('2d');
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// If there is text to overlay, draw it
if (textOverlay) {
const fontSize = Math.max(16, Math.floor(canvas.height / 15));
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Calculate text background strip height
const stripHeight = fontSize * 2.5;
const stripY = canvas.height - stripHeight;
// Draw a semi-transparent dark background strip for text readability
ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
ctx.fillRect(0, stripY, canvas.width, stripHeight);
// Draw the text
ctx.fillStyle = '#ffffff';
// Add a slight shadow to the text
ctx.shadowColor = 'rgba(0,0,0,0.8)';
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.fillText(textOverlay, canvas.width / 2, stripY + (stripHeight / 2));
}
return canvas;
}This tool allows users to overlay text onto an image. It automatically adjusts the font size based on the image dimensions and adds a semi-transparent background strip behind the text to ensure readability. This is useful for creating memes, adding captions to photos, or generating quick visual announcements for social media.