Website URL Image Fetcher Tool

async function processImage(originalImg, address = "https://example.com") {
    let url = address.trim();
    if (!/^https?:\/\//i.test(url)) {
        // Prepend https:// if protocol is missing
        url = 'https://' + url;
    }

    const loadImage = (src, cors = true) => {
        return new Promise((resolve, reject) => {
            const img = new Image();
            if (cors) {
                img.crossOrigin = "anonymous";
            }
            img.onload = () => resolve(img);
            img.onerror = () => reject(new Error('Failed to load image from ' + src));
            img.src = src;
        });
    };

    const attemptFetch = async (src) => {
        try {
            // First attempt to load with CORS to return a canvas (preferred)
            const img = await loadImage(src, true);
            const canvas = document.createElement('canvas');
            canvas.width = img.width || 1200;
            canvas.height = img.height || 800;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            return canvas;
        } catch (e) {
            // Fallback: If CORS fails, load without CORS and return the Image object
            return await loadImage(src, false);
        }
    };

    // If the URL is a direct link to an image file, try fetching it directly first
    if (url.match(/\.(jpeg|jpg|gif|png|webp|svg|bmp)$/i)) {
        try {
            return await attemptFetch(url);
        } catch (e) {
            // Silently fall through to screenshot services if direct fetch fails
        }
    }

    // Free screenshot APIs to fetch website thumbnails
    const apis = [
        `https://image.thum.io/get/width/1200/crop/800/${url}`,
        `https://s.wordpress.com/mshots/v1/${encodeURIComponent(url)}?w=1200`
    ];

    for (let src of apis) {
        try {
            return await attemptFetch(src);
        } catch (err) {
            // Continue to the next API in case of failure
        }
    }

    // If all attempts fail, return a fallback canvas indicating the error
    const canvas = document.createElement('canvas');
    canvas.width = 800;
    canvas.height = 600;
    const ctx = canvas.getContext('2d');
    
    ctx.fillStyle = "#f0f2f5";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = "#333333";
    ctx.font = "24px Arial, sans-serif";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Could not load image or screenshot from:", canvas.width / 2, canvas.height / 2 - 20);
    
    ctx.fillStyle = "#0066cc";
    ctx.font = "20px Arial, sans-serif";
    ctx.fillText(url, canvas.width / 2, canvas.height / 2 + 20);
    
    return canvas;
}