Image URL To Web Address Converter

function processImage(originalImg, targetWebAddress = "https://example.com", imageFormat = "png") {
    // Create the main container div
    const container = document.createElement('div');
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.gap = '20px';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.width = '100%';
    container.style.boxSizing = 'border-box';
    container.style.padding = '15px';
    container.style.backgroundColor = '#f9f9f9';
    container.style.border = '1px solid #ddd';
    container.style.borderRadius = '8px';

    // Generate the Image Data URL (acts as an internal Web Address / Base64 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 MIME type based on desired format
    let mimeType = 'image/png';
    const fmt = imageFormat.toLowerCase();
    if (fmt === 'jpeg' || fmt === 'jpg') {
        mimeType = 'image/jpeg';
    } else if (fmt === 'webp') {
        mimeType = 'image/webp';
    }
    
    // Extract Base64 Data URL
    const dataUrl = canvas.toDataURL(mimeType);

    // 1. Preview Section (Clickable image)
    const previewSection = document.createElement('div');
    
    const previewLabel = document.createElement('h3');
    previewLabel.textContent = 'Image Link Preview';
    previewLabel.style.margin = '0 0 10px 0';
    previewLabel.style.fontSize = '16px';
    previewLabel.style.color = '#333';
    
    const anchor = document.createElement('a');
    anchor.href = targetWebAddress;
    anchor.target = '_blank';
    anchor.title = 'Click to open: ' + targetWebAddress;
    anchor.style.display = 'inline-block';
    
    const previewCanvas = document.createElement('canvas');
    previewCanvas.width = originalImg.width;
    previewCanvas.height = originalImg.height;
    previewCanvas.style.maxWidth = '100%';
    previewCanvas.style.maxHeight = '250px';
    previewCanvas.style.objectFit = 'contain';
    previewCanvas.style.border = '2px dashed #007bff';
    previewCanvas.style.borderRadius = '4px';
    previewCanvas.style.cursor = 'pointer';
    previewCanvas.getContext('2d').drawImage(originalImg, 0, 0);
    
    anchor.appendChild(previewCanvas);
    previewSection.appendChild(previewLabel);
    previewSection.appendChild(anchor);
    container.appendChild(previewSection);

    // 2. Data URL Box (Web Address Representation of the Image)
    const dataSection = document.createElement('div');
    
    const dataLabel = document.createElement('h3');
    dataLabel.textContent = 'Image Data URL (Base64 Web Address)';
    dataLabel.style.margin = '0 0 10px 0';
    dataLabel.style.fontSize = '16px';
    dataLabel.style.color = '#333';

    const dataArea = document.createElement('textarea');
    dataArea.value = dataUrl;
    dataArea.readOnly = true;
    dataArea.style.width = '100%';
    dataArea.style.height = '100px';
    dataArea.style.boxSizing = 'border-box';
    dataArea.style.padding = '10px';
    dataArea.style.resize = 'vertical';
    dataArea.style.border = '1px solid #ccc';
    dataArea.style.borderRadius = '4px';
    dataArea.style.fontFamily = 'monospace';
    dataArea.style.fontSize = '12px';
    
    // Auto-select text on click for ease of use
    dataArea.addEventListener('click', () => dataArea.select());

    dataSection.appendChild(dataLabel);
    dataSection.appendChild(dataArea);
    container.appendChild(dataSection);

    // 3. HTML Embed Code Box
    const htmlSection = document.createElement('div');
    
    const htmlLabel = document.createElement('h3');
    htmlLabel.textContent = 'HTML Embed Code (For Websites & Web Interfaces)';
    htmlLabel.style.margin = '0 0 10px 0';
    htmlLabel.style.fontSize = '16px';
    htmlLabel.style.color = '#333';

    const htmlArea = document.createElement('textarea');
    htmlArea.value = `<a href="${targetWebAddress}" target="_blank">\n  <img src="${dataUrl}" alt="Linked Image" />\n</a>`;
    htmlArea.readOnly = true;
    htmlArea.style.width = '100%';
    htmlArea.style.height = '120px';
    htmlArea.style.boxSizing = 'border-box';
    htmlArea.style.padding = '10px';
    htmlArea.style.resize = 'vertical';
    htmlArea.style.border = '1px solid #ccc';
    htmlArea.style.borderRadius = '4px';
    htmlArea.style.fontFamily = 'monospace';
    htmlArea.style.fontSize = '12px';
    
    // Auto-select text on click for ease of use
    htmlArea.addEventListener('click', () => htmlArea.select());

    htmlSection.appendChild(htmlLabel);
    htmlSection.appendChild(htmlArea);
    container.appendChild(htmlSection);

    // Return the cleanly formatted container widget
    return container;
}