Image URL Extractor

/**
 * Extracts and displays the URL of a given image object.
 * Provides a user-friendly interface to view and copy the URL.
 *
 * @param {HTMLImageElement} originalImg The original image object from which to extract the URL.
 * @returns {HTMLElement} A div element containing the URL in a read-only input field and a "Copy" button.
 */
function processImage(originalImg) {
    // Get the image URL from the source attribute.
    const imageUrl = originalImg.src;

    // Create a main container for the output.
    const container = document.createElement('div');
    container.style.padding = '1rem';
    container.style.fontFamily = 'sans-serif';
    container.style.border = '1px solid #e0e0e0';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#fafafa';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';
    container.style.display = 'flex';
    container.style.alignItems = 'center';
    container.style.gap = '10px';
    container.style.flexWrap = 'wrap';


    // Create a read-only input field to display the URL.
    // This makes it easy for users to see, select, and copy the text.
    const urlInput = document.createElement('input');
    urlInput.type = 'text';
    urlInput.value = imageUrl;
    urlInput.readOnly = true;
    urlInput.style.flexGrow = '1';
    urlInput.style.padding = '0.5rem';
    urlInput.style.border = '1px solid #ccc';
    urlInput.style.borderRadius = '4px';
    urlInput.style.fontFamily = 'monospace';
    urlInput.style.fontSize = '14px';
    urlInput.style.backgroundColor = '#fff';
    urlInput.style.minWidth = '200px';

    // Automatically select the text when the input field is clicked.
    urlInput.onclick = () => {
        urlInput.select();
        // For mobile device compatibility
        urlInput.setSelectionRange(0, 99999);
    };

    // Create a "Copy to Clipboard" button.
    const copyButton = document.createElement('button');
    copyButton.textContent = 'Copy';
    copyButton.style.padding = '0.5rem 1rem';
    copyButton.style.border = 'none';
    copyButton.style.borderRadius = '4px';
    copyButton.style.backgroundColor = '#007bff';
    copyButton.style.color = 'white';
    copyButton.style.cursor = 'pointer';
    copyButton.style.fontWeight = 'bold';
    copyButton.style.flexShrink = '0'; // Prevent button from shrinking

    copyButton.onclick = (e) => {
        e.stopPropagation(); // Prevent the input's click handler from firing.
        
        // Use the modern Clipboard API.
        navigator.clipboard.writeText(imageUrl).then(() => {
            const originalText = copyButton.textContent;
            copyButton.textContent = 'Copied!';
            copyButton.disabled = true;
            setTimeout(() => {
                copyButton.textContent = originalText;
                copyButton.disabled = false;
            }, 2000);
        }).catch(err => {
            console.error('Async clipboard copy failed: ', err);
            // Fallback for older browsers or insecure contexts (non-HTTPS).
            try {
                urlInput.select();
                urlInput.setSelectionRange(0, 99999);
                document.execCommand('copy');
                
                const originalText = copyButton.textContent;
                copyButton.textContent = 'Copied!';
                copyButton.disabled = true;
                 setTimeout(() => {
                    copyButton.textContent = originalText;
                    copyButton.disabled = false;
                }, 2000);
            } catch (fallbackErr) {
                 alert('Could not copy URL to clipboard.');
                 console.error('Fallback copy command failed:', fallbackErr);
            }
        });
    };

    // Add elements to the container.
    container.appendChild(urlInput);
    container.appendChild(copyButton);

    // Create a wrapper element to potentially add a note for data URIs.
    const wrapper = document.createElement('div');
    wrapper.appendChild(container);

    // If the URL is a data URI, add an explanatory note.
    if (imageUrl.startsWith('data:')) {
        const note = document.createElement('p');
        note.textContent = 'Note: This is a Data URI, which embeds the image data directly into the URL instead of pointing to a web address.';
        note.style.fontSize = '12px';
        note.style.color = '#555';
        note.style.marginTop = '10px';
        note.style.textAlign = 'left';
        wrapper.appendChild(note);
    }
    
    return wrapper;
}