Image Address Link Extractor

/**
 * Extracts the source URL (address link) from an image object and returns an element
 * that displays the link and provides a button to copy it.
 * @param {Image} originalImg The original image object from which to extract the src link.
 * @returns {HTMLElement} A div element containing the image URL and a copy button.
 */
function processImage(originalImg) {
    const imageUrl = originalImg.src;

    // Create a container element for the output.
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.padding = '15px';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '10px';
    container.style.maxWidth = '100%';
    container.style.boxSizing = 'border-box';

    // Create a title.
    const title = document.createElement('p');
    title.textContent = 'Image Address:';
    title.style.margin = '0';
    title.style.fontWeight = 'bold';
    title.style.color = '#333';

    // Create a pre-formatted block to display the URL.
    // This helps handle potentially very long data URLs by allowing scrolling.
    const linkHolder = document.createElement('pre');
    linkHolder.style.margin = '0';
    linkHolder.style.padding = '10px';
    linkHolder.style.backgroundColor = '#fff';
    linkHolder.style.border = '1px solid #ccc';
    linkHolder.style.borderRadius = '4px';
    linkHolder.style.whiteSpace = 'pre-wrap'; // Wrap long lines.
    linkHolder.style.wordBreak = 'break-all'; // Break very long words/URLs.
    linkHolder.style.maxHeight = '200px'; 
    linkHolder.style.overflowY = 'auto'; 
    
    // Create an anchor tag for the URL for better accessibility and interaction.
    const linkElement = document.createElement('a');
    if (imageUrl.startsWith('http')) {
        linkElement.href = imageUrl;
        linkElement.target = '_blank'; // Open external links in a new tab.
        linkElement.rel = 'noopener noreferrer';
    }
    linkElement.textContent = imageUrl;
    linkElement.style.color = '#0066cc';
    linkElement.style.textDecoration = 'none';

    linkHolder.appendChild(linkElement);

    // Create a copy button.
    const copyButton = document.createElement('button');
    copyButton.textContent = 'Copy Address';
    copyButton.style.alignSelf = 'flex-start';
    copyButton.style.padding = '8px 15px';
    copyButton.style.border = 'none';
    copyButton.style.backgroundColor = '#007bff';
    copyButton.style.color = 'white';
    copyButton.style.borderRadius = '4px';
    copyButton.style.cursor = 'pointer';
    copyButton.style.transition = 'background-color 0.2s ease';

    // Add click event listener to the button for copying the URL.
    copyButton.onclick = () => {
        navigator.clipboard.writeText(imageUrl).then(() => {
            // Provide user feedback on success.
            const originalText = copyButton.textContent;
            copyButton.textContent = 'Copied!';
            copyButton.disabled = true;
            copyButton.style.backgroundColor = '#28a745'; // Green for success
            setTimeout(() => {
                copyButton.textContent = originalText;
                copyButton.disabled = false;
                copyButton.style.backgroundColor = '#007bff';
            }, 2000); // Reset after 2 seconds.
        }).catch(err => {
            console.error('Failed to copy image address: ', err);
            alert('Failed to copy address automatically. Please copy it manually.');
        });
    };
    
    // Add hover effects for the button
    copyButton.onmouseenter = () => { if (!copyButton.disabled) copyButton.style.backgroundColor = '#0056b3'; };
    copyButton.onmouseleave = () => { if (!copyButton.disabled) copyButton.style.backgroundColor = '#007bff'; };


    // Append all elements to the main container.
    container.appendChild(title);
    container.appendChild(linkHolder);
    container.appendChild(copyButton);

    // Return the final element.
    return container;
}