function processImage(originalImg, name = "Echo", softness = 15) {
// Create a canvas to process the image
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// Set canvas dimensions to match the original image
canvas.width = originalImg.width;
canvas.height = originalImg.height;
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0);
// Add a dark, semi-transparent overlay to make the "softly spoken" text stand out
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Configure typography for "A name spoken softly"
// Using a web-safe elegant serif font
const fontSize = Math.max(24, Math.floor(canvas.width / 12));
ctx.font = `italic ${fontSize}px "Georgia", "Times New Roman", serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Apply the "softness" element via shadow blur/glow and reduced opacity
const blurAmount = Math.max(0, Number(softness));
ctx.shadowColor = 'rgba(255, 255, 255, 0.9)';
ctx.shadowBlur = blurAmount;
// Calculate a soft, semi-transparent white for the text color based on softness
const textOpacity = Math.max(0.15, 1 - (blurAmount / 50));
ctx.fillStyle = `rgba(255, 255, 255, ${textOpacity})`;
// Draw the name delicately in the center of the image
ctx.fillText(name, canvas.width / 2, canvas.height / 2);
return canvas;
}This tool allows users to overlay personalized text onto an image with a stylized, atmospheric effect. It applies a semi-transparent dark overlay to the original image and centers the specified text using elegant typography. The tool includes a ‘softness’ feature that adjusts the text’s glow and opacity, creating a delicate aesthetic. This can be used for creating personalized digital greetings, social media watermarks, or artistic profile overlays.