function processImage(originalImg, text = "ни maman, ни mon oncle, ни ma tante", textColor = "white", outlineColor = "black") {
// Create a canvas element
const canvas = document.createElement('canvas');
canvas.width = originalImg.naturalWidth || originalImg.width;
canvas.height = originalImg.naturalHeight || originalImg.height;
const ctx = canvas.getContext('2d');
// Draw the original image onto the canvas
ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
// Set up responsive text styling based on image width
const fontSize = Math.max(16, Math.floor(canvas.width / 15));
ctx.font = `bold ${fontSize}px Arial, sans-serif`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Position text in the center wrapper
const x = canvas.width / 2;
const y = canvas.height / 2;
// Line breaks to handle long text gracefully (simple version)
const words = text.split(' ');
let line = '';
const lines = [];
const maxWidth = canvas.width * 0.9;
for (let n = 0; n < words.length; n++) {
const testLine = line + words[n] + ' ';
const metrics = ctx.measureText(testLine);
const testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
lines.push(line);
line = words[n] + ' ';
} else {
line = testLine;
}
}
lines.push(line);
// Draw each line of text
const lineHeight = fontSize * 1.2;
let startY = y - ((lines.length - 1) * lineHeight) / 2;
for (let i = 0; i < lines.length; i++) {
// Draw outline/stroke for better readability
ctx.strokeStyle = outlineColor;
ctx.lineWidth = fontSize / 6;
ctx.lineJoin = "round";
ctx.strokeText(lines[i], x, startY + (i * lineHeight));
// Draw solid fill text
ctx.fillStyle = textColor;
ctx.fillText(lines[i], x, startY + (i * lineHeight));
}
return canvas;
}This tool allows users to overlay custom text onto an image. It automatically scales the font size to fit the image dimensions and includes features to ensure text readability, such as adjustable text colors and outlines. This can be useful for creating memes, adding watermarks, or generating captioned images for social media and presentations.