Image RST Converter

function processImage(originalImg, imgFormat = "png", altText = "Embedded Image") {
    // Determine image dimensions
    const width = originalImg.naturalWidth || originalImg.width || 300;
    const height = originalImg.naturalHeight || originalImg.height || 150;

    // Create a canvas to draw the image and extract base64 data
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Identify output format
    let mimeType = 'image/png';
    const fmt = String(imgFormat).toLowerCase().trim();
    if (fmt === 'jpeg' || fmt === 'jpg') {
        mimeType = 'image/jpeg';
    } else if (fmt === 'webp') {
        mimeType = 'image/webp';
    } else if (fmt === 'gif') {
        mimeType = 'image/gif';
    }

    // Convert to base64 Data URL
    const dataUrl = canvas.toDataURL(mimeType);

    // Construct the reStructuredText (RST) image directive markup
    const rstMarkup = `.. image:: ${dataUrl}
   :alt: ${altText}
   :width: ${width}px
   :height: ${height}px
`;

    // Build the UI container holding the output
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.width = '100%';
    container.style.maxWidth = '800px';
    container.style.padding = '20px';
    container.style.backgroundColor = '#f8f9fa';
    container.style.border = '1px solid #dee2e6';
    container.style.borderRadius = '8px';
    container.style.boxSizing = 'border-box';

    // Title
    const title = document.createElement('h3');
    title.textContent = 'reStructuredText (RST) Image Embedded Code';
    title.style.marginTop = '0';
    title.style.color = '#343a40';
    title.style.fontSize = '18px';
    title.style.marginBottom = '10px';
    container.appendChild(title);

    // Description text
    const description = document.createElement('p');
    description.textContent = 'Copy the syntax below to embed this base64 image directly into your .rst documents.';
    description.style.fontSize = '14px';
    description.style.color = '#6c757d';
    description.style.marginTop = '0';
    description.style.marginBottom = '16px';
    container.appendChild(description);

    // Textarea with formatted code
    const textarea = document.createElement('textarea');
    textarea.value = rstMarkup;
    textarea.style.width = '100%';
    textarea.style.height = '200px';
    textarea.style.padding = '12px';
    textarea.style.fontFamily = 'Menlo, Monaco, Consolas, "Courier New", monospace';
    textarea.style.fontSize = '13px';
    textarea.style.color = '#212529';
    textarea.style.backgroundColor = '#ffffff';
    textarea.style.border = '1px solid #ced4da';
    textarea.style.borderRadius = '4px';
    textarea.style.resize = 'vertical';
    textarea.style.boxSizing = 'border-box';
    textarea.style.whiteSpace = 'pre';
    textarea.readOnly = true;
    container.appendChild(textarea);

    // Copy to clipboard button
    const copyBtn = document.createElement('button');
    copyBtn.textContent = 'Copy to Clipboard';
    copyBtn.style.marginTop = '12px';
    copyBtn.style.padding = '10px 20px';
    copyBtn.style.fontSize = '14px';
    copyBtn.style.fontWeight = '600';
    copyBtn.style.color = '#ffffff';
    copyBtn.style.backgroundColor = '#0d6efd';
    copyBtn.style.border = 'none';
    copyBtn.style.borderRadius = '4px';
    copyBtn.style.cursor = 'pointer';
    copyBtn.style.transition = 'background-color 0.2s';

    copyBtn.onmouseover = () => {
        copyBtn.style.backgroundColor = '#0b5ed7';
    };
    copyBtn.onmouseout = () => {
         if (copyBtn.textContent === 'Copy to Clipboard') {
             copyBtn.style.backgroundColor = '#0d6efd';
         }
    };

    copyBtn.onclick = () => {
        textarea.select();
        try {
            document.execCommand('copy');
            copyBtn.textContent = 'Copied!';
            copyBtn.style.backgroundColor = '#198754'; // green color on success
            setTimeout(() => {
                copyBtn.textContent = 'Copy to Clipboard';
                copyBtn.style.backgroundColor = '#0d6efd';
            }, 2500);
        } catch (err) {
            console.error('Failed to copy', err);
        }
    };

    container.appendChild(copyBtn);

    return container;
}