Image Placeholder Tool

/**
 * Creates an image placeholder using the dimensions of a given image object.
 * The placeholder consists of a colored background with text (typically the dimensions) in the center.
 *
 * @param {Image} originalImg The original image object. Its dimensions (width and height) will be used for the placeholder. The content of the image is ignored.
 * @param {string} [backgroundColor='#cccccc'] The background color of the placeholder. Can be any valid CSS color string.
 * @param {string} [textColor='#969696'] The color of the text on the placeholder. Can be any valid CSS color string.
 * @param {string} [text=''] Custom text to display on the placeholder. If empty, the image dimensions (e.g., "300x200") will be used.
 * @param {number} [fontSize=0] The font size in pixels. If set to 0, the function will automatically calculate a suitable font size.
 * @param {string} [fontFamily='Arial'] The font family for the text. Use web-safe fonts like Arial, Verdana, sans-serif.
 * @returns {HTMLCanvasElement} A canvas element representing the generated placeholder image.
 */
function processImage(originalImg, backgroundColor = '#cccccc', textColor = '#969696', text = '', fontSize = 0, fontFamily = 'Arial') {
    const width = originalImg.width;
    const height = originalImg.height;

    // Create a canvas with the same dimensions as the original image
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // 1. Draw the background
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, width, height);

    // 2. Determine the text to display
    const textToDraw = text || `${width} x ${height}`;

    // 3. Determine the font size
    let finalFontSize = fontSize;
    if (finalFontSize <= 0) {
        // Auto-size the font.
        // Start with a large size and shrink it until the text fits within 90% of the placeholder's width.
        // This is a robust way to ensure text doesn't overflow.
        finalFontSize = Math.min(height * 0.8, width * 0.8); // Start with a large but reasonable size
        ctx.font = `${finalFontSize}px ${fontFamily}`;

        while (ctx.measureText(textToDraw).width > width * 0.9 && finalFontSize > 8) {
            finalFontSize--;
            ctx.font = `${finalFontSize}px ${fontFamily}`;
        }
    }

    // 4. Set final text properties and draw the text
    ctx.font = `${finalFontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(textToDraw, width / 2, height / 2);

    // 5. Return the canvas
    return canvas;
}