function processImage(originalImg, overlayText = "Современные технологии/Книги/Мамин свнок", textColor = "white", fontSize = 48) {
// Create a new canvas
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);
// Default configuration for text rendering
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
ctx.fillStyle = textColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Add a black shadow/stroke so text is readable on light and dark backgrounds
ctx.shadowColor = 'black';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 3;
ctx.shadowOffsetY = 3;
// Use the '/' from the unrecognized description as a line break delimiter
const lines = overlayText.split('/');
const lineHeight = fontSize * 1.2;
// Calculate starting Y position to center the text block vertically
const totalTextHeight = (lines.length - 1) * lineHeight;
const startY = (canvas.height - totalTextHeight) / 2;
// Draw each line of text
lines.forEach((line, index) => {
const currentY = startY + (index * lineHeight);
// Add stroke/border around text for extra readability
ctx.lineWidth = Math.max(2, fontSize / 10);
ctx.strokeStyle = 'black';
ctx.strokeText(line.trim(), canvas.width / 2, currentY);
// Fill the text with the chosen color
ctx.fillText(line.trim(), canvas.width / 2, currentY);
});
return canvas;
}This tool allows users to overlay custom text onto an existing image. It features adjustable text color and font size, and it automatically formats multi-line text using a delimiter. To ensure readability across various image backgrounds, the tool applies a text stroke and a shadow effect. This can be used for creating social media graphics, adding captions to photos, or generating personalized watermarks and titles for digital content.