Image Open API Tool

function processImage(originalImg, jsonKey = "image_base64", targetFormat = "png") {
    // Create the main wrapper container for the tool
    const container = document.createElement('div');
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.padding = '20px';
    container.style.backgroundColor = '#ffffff';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '8px';
    container.style.boxShadow = '0 4px 10px rgba(0,0,0,0.05)';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '15px';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';

    // Title and description
    const title = document.createElement('h2');
    title.textContent = 'Open API Image Payload Generator';
    title.style.margin = '0';
    title.style.color = '#333';
    title.style.fontSize = '20px';

    const desc = document.createElement('p');
    desc.textContent = 'Automatically generates a standard JSON representation of the image for use in RESTful / Open API requests.';
    desc.style.margin = '0 0 5px 0';
    desc.style.color = '#666';
    desc.style.fontSize = '14px';

    // Render original image on a canvas to extract Base64 Data URL
    const canvas = document.createElement('canvas');
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(originalImg, 0, 0);

    // Determine target MIME type
    let mimeType = 'image/png';
    let ext = 'png';
    if (targetFormat.toLowerCase() === 'jpeg' || targetFormat.toLowerCase() === 'jpg') {
        mimeType = 'image/jpeg';
        ext = 'jpg';
    } else if (targetFormat.toLowerCase() === 'webp') {
        mimeType = 'image/webp';
        ext = 'webp';
    }
    
    // Extract base64
    const base64DataUrl = canvas.toDataURL(mimeType);

    // Image preview element
    const imgPreview = document.createElement('img');
    imgPreview.src = base64DataUrl;
    imgPreview.style.maxWidth = '100%';
    imgPreview.style.maxHeight = '250px';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.border = '1px dashed #ccc';
    imgPreview.style.borderRadius = '6px';
    imgPreview.style.backgroundColor = '#f9f9f9';

    // Construct the standard OpenAPI JSON Payload
    const payload = {
        metadata: {
            filename: `upload.${ext}`,
            width: originalImg.width,
            height: originalImg.height,
            mime_type: mimeType,
            size_bytes: Math.round((base64DataUrl.length * 3) / 4) // Appx byte size calculated from base64
        }
    };
    payload[jsonKey] = base64DataUrl;

    // Text area to display the JSON
    const textArea = document.createElement('textarea');
    textArea.value = JSON.stringify(payload, null, 2);
    textArea.style.width = '100%';
    textArea.style.height = '300px';
    textArea.style.fontFamily = '"Courier New", Courier, monospace';
    textArea.style.fontSize = '13px';
    textArea.style.padding = '12px';
    textArea.style.border = '1px solid #ccc';
    textArea.style.borderRadius = '6px';
    textArea.style.backgroundColor = '#f4f6f8';
    textArea.style.color = '#333';
    textArea.style.boxSizing = 'border-box';
    textArea.style.resize = 'vertical';
    textArea.readOnly = true;

    // Copy to clipboard button
    const btnCopy = document.createElement('button');
    btnCopy.textContent = 'Copy JSON Payload';
    btnCopy.style.padding = '10px 16px';
    btnCopy.style.backgroundColor = '#007bff';
    btnCopy.style.color = '#fff';
    btnCopy.style.border = 'none';
    btnCopy.style.borderRadius = '4px';
    btnCopy.style.cursor = 'pointer';
    btnCopy.style.fontWeight = 'bold';
    btnCopy.style.alignSelf = 'flex-start';
    btnCopy.style.transition = 'background-color 0.2s';

    btnCopy.onclick = () => {
        textArea.select();
        try {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(textArea.value).then(triggerSuccess);
            } else {
                document.execCommand('copy');
                triggerSuccess();
            }
        } catch (err) {
            console.error('Failed to copy text', err);
        }
    };

    function triggerSuccess() {
        const originalText = btnCopy.textContent;
        btnCopy.textContent = '✓ Copied to Clipboard!';
        btnCopy.style.backgroundColor = '#28a745';
        setTimeout(() => {
            btnCopy.textContent = originalText;
            btnCopy.style.backgroundColor = '#007bff';
        }, 2000);
    }

    // Assemble the DOM elements
    container.appendChild(title);
    container.appendChild(desc);
    container.appendChild(imgPreview);
    container.appendChild(textArea);
    container.appendChild(btnCopy);

    return container;
}