Image Placeholder Syntax Generator

function processImage(originalImg, bgColor = "cccccc", textColor = "555555", customText = "") {
    // Determine dimensions from the input image (fallback nicely if missing)
    const width = originalImg.width || 400;
    const height = originalImg.height || 300;

    // Normalize color parameters to ensure they start with `#`
    const bg = bgColor.startsWith('#') ? bgColor : '#' + bgColor;
    const tc = textColor.startsWith('#') ? textColor : '#' + textColor;
    const textToShow = customText || `${width} × ${height}`;

    // Create a local canvas to render the placeholder
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

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

    // Draw the dimensions or custom text
    ctx.fillStyle = tc;
    const fontSize = Math.max(16, Math.floor(Math.min(width, height) / 10));
    ctx.font = `bold ${fontSize}px sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(textToShow, width / 2, height / 2);

    // Generate base64 string for an inline data-uri usage
    const base64Url = canvas.toDataURL('image/png');

    // Prepare variables for external placeholder service syntax (e.g. placehold.co)
    const cleanBg = bg.replace('#', '');
    const cleanTc = tc.replace('#', '');
    const textParam = customText ? `?text=${encodeURIComponent(customText)}` : '';
    const externalUrl = `https://placehold.co/${width}x${height}/${cleanBg}/${cleanTc}${textParam}`;

    // Set up the UI Container element
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '24px';
    container.style.padding = '20px';
    container.style.background = '#f9fafb';
    container.style.border = '1px solid #e5e7eb';
    container.style.borderRadius = '8px';
    container.style.color = '#111827';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';

    // Canvas Preview section
    const previewSection = document.createElement('div');
    
    const previewTitle = document.createElement('h3');
    previewTitle.textContent = 'Preview';
    previewTitle.style.margin = '0 0 12px 0';
    previewTitle.style.fontSize = '1.25rem';
    
    // Style the canvas for responsive display
    canvas.style.maxWidth = '100%';
    canvas.style.height = 'auto';
    canvas.style.border = '1px solid #d1d5db';
    canvas.style.borderRadius = '4px';
    canvas.style.display = 'block';

    previewSection.appendChild(previewTitle);
    previewSection.appendChild(canvas);
    container.appendChild(previewSection);

    // Syntax Generator section
    const syntaxSection = document.createElement('div');
    syntaxSection.style.display = 'flex';
    syntaxSection.style.flexDirection = 'column';
    syntaxSection.style.gap = '15px';

    const syntaxTitle = document.createElement('h3');
    syntaxTitle.textContent = 'Generated Syntaxes';
    syntaxTitle.style.margin = '0';
    syntaxTitle.style.fontSize = '1.25rem';
    syntaxSection.appendChild(syntaxTitle);

    // Helper syntax block generator
    const createSyntaxField = (titleStr, codeStr) => {
        const wrap = document.createElement('div');
        wrap.style.display = 'flex';
        wrap.style.flexDirection = 'column';
        wrap.style.gap = '6px';

        const label = document.createElement('label');
        label.textContent = titleStr;
        label.style.fontWeight = '600';
        label.style.fontSize = '0.9rem';

        const textarea = document.createElement('textarea');
        textarea.value = codeStr;
        textarea.rows = codeStr.length > 200 ? 5 : 2;
        textarea.readOnly = true;
        textarea.style.width = '100%';
        textarea.style.padding = '10px';
        textarea.style.boxSizing = 'border-box';
        textarea.style.border = '1px solid #d1d5db';
        textarea.style.borderRadius = '4px';
        textarea.style.fontFamily = 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace';
        textarea.style.fontSize = '0.85rem';
        textarea.style.resize = 'vertical';
        textarea.style.background = '#ffffff';

        // Auto-select on focus for easy copying
        textarea.addEventListener('focus', () => textarea.select());

        wrap.appendChild(label);
        wrap.appendChild(textarea);
        return wrap;
    };

    // Add generated syntaxes
    syntaxSection.appendChild(createSyntaxField('HTML Code (External URL)', `<img src="${externalUrl}" alt="Placeholder Image" width="${width}" height="${height}" />`));
    syntaxSection.appendChild(createSyntaxField('Markdown Code (External URL)', `![Placeholder Image](${externalUrl})`));
    syntaxSection.appendChild(createSyntaxField('External Link Only', externalUrl));
    
    // Provide a self-contained inline base64 option without loading any external resources
    syntaxSection.appendChild(createSyntaxField('HTML Code (Base64 Inline - No External Requests)', `<img src="${base64Url}" alt="Placeholder Image" width="${width}" height="${height}" />`));

    container.appendChild(syntaxSection);

    return container;
}