function processImage(originalImg, text = "Enter your text here", x = 50, y = 50, boxColor = "rgba(255, 255, 255, 0.8)", textColor = "#000000", fontSize = 32, padding = 15) {
// Create a new canvas
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);
// Setup font properties
ctx.font = `${fontSize}px Arial, sans-serif`;
ctx.textBaseline = 'top';
// Handle multiline text (both actual line breaks and escaped \n)
const lines = text.split(/\r?\n|\\n/);
// Calculate the dimensions of the text box
let maxWidth = 0;
for(let line of lines) {
const metrics = ctx.measureText(line);
if(metrics.width > maxWidth) {
maxWidth = metrics.width;
}
}
const lineHeight = fontSize * 1.25; // Slight spacing between lines
const boxWidth = maxWidth + (padding * 2);
const boxHeight = (lines.length * lineHeight) + (padding * 2) - (lineHeight - fontSize);
// Ensure the box and text stay within image boundaries if possible
// (Optional boundary logic left to position values but drawn as requested)
// Draw the background box
ctx.fillStyle = boxColor;
ctx.fillRect(x, y, boxWidth, boxHeight);
// Draw the text over the box
ctx.fillStyle = textColor;
for (let i = 0; i < lines.length; i++) {
const lineY = y + padding + (i * lineHeight);
ctx.fillText(lines[i], x + padding, lineY);
}
return canvas;
}The Image Text Box Adder allows you to overlay custom text onto an image within a styled background box. Users can customize various attributes such as the text content, position, font size, text color, and the color and transparency of the box itself. This tool is useful for creating captioned photos, adding watermarks, generating social media graphics, or labeling diagrams and educational images.