Image Online Finder

function processImage(originalImg) {
    // Main container
    const container = document.createElement('div');
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.textAlign = 'center';
    container.style.padding = '20px';
    container.style.border = '1px solid #ccc';
    container.style.borderRadius = '8px';
    container.style.maxWidth = '500px';
    container.style.margin = '0 auto';

    // Title
    const title = document.createElement('h3');
    title.textContent = 'Image Online Finder';
    title.style.margin = '0 0 15px 0';
    container.appendChild(title);

    // Image Preview using Canvas to resize
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const maxWidth = 200;
    const maxHeight = 200;
    let width = originalImg.naturalWidth;
    let height = originalImg.naturalHeight;

    if (width > height) {
        if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
        }
    } else {
        if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
        }
    }
    canvas.width = width;
    canvas.height = height;
    canvas.style.display = 'block';
    canvas.style.margin = '15px auto';
    canvas.style.border = '1px solid #ddd';
    canvas.style.borderRadius = '4px';

    ctx.drawImage(originalImg, 0, 0, width, height);
    container.appendChild(canvas);

    // The core functionality of a client-side "Image Finder" is to link to external
    // reverse image search services. This is only possible if the image has a public URL.
    const isPublicUrl = /^https?:\/\//i.test(originalImg.src);

    const info = document.createElement('p');
    info.style.fontSize = '14px';
    info.style.color = '#555';
    info.style.lineHeight = '1.5';
    container.appendChild(info);

    const searchList = document.createElement('ul');
    searchList.style.listStyleType = 'none';
    searchList.style.padding = '0';
    searchList.style.margin = '20px 0 0 0';

    const searchEngines = {
        'Google Images': {
            searchUrl: 'https://images.google.com/searchbyimage?image_url=',
            homeUrl: 'https://images.google.com/'
        },
        'Bing Visual Search': {
            searchUrl: 'https://www.bing.com/images/search?view=detailv2&iss=sbi&q=imgurl:',
            homeUrl: 'https://www.bing.com/images'
        },
        'Yandex Images': {
            searchUrl: 'https://yandex.com/images/search?rpt=imageview&url=',
            homeUrl: 'https://yandex.com/images/'
        },
        'TinEye': {
            searchUrl: 'https://tineye.com/search?url=',
            homeUrl: 'https://tineye.com/'
        }
    };

    if (isPublicUrl) {
        info.textContent = 'Click a service below to perform a reverse image search.';
        const encodedUrl = encodeURIComponent(originalImg.src);

        for (const name in searchEngines) {
            const engine = searchEngines[name];
            const li = document.createElement('li');
            li.style.margin = '10px 0';

            const a = document.createElement('a');
            a.href = engine.searchUrl + encodedUrl;
            a.textContent = `Search with ${name}`;
            a.target = '_blank';
            a.rel = 'noopener noreferrer';
            a.style.display = 'inline-block';
            a.style.padding = '10px 20px';
            a.style.backgroundColor = '#007bff';
            a.style.color = 'white';
            a.style.textDecoration = 'none';
            a.style.borderRadius = '5px';
            a.style.minWidth = '200px';

            li.appendChild(a);
            searchList.appendChild(li);
        }
    } else {
        info.innerHTML = `This image appears to be from a local file or a data URL. We cannot automatically search for it.<br>
                          Please visit your preferred search engine and upload the image manually.`;

        for (const name in searchEngines) {
            const engine = searchEngines[name];
            const li = document.createElement('li');
            li.style.margin = '10px 0';

            const a = document.createElement('a');
            a.href = engine.homeUrl;
            a.textContent = `Go to ${name}`;
            a.target = '_blank';
            a.rel = 'noopener noreferrer';
            a.style.display = 'inline-block';
            a.style.padding = '10px 20px';
            a.style.backgroundColor = '#6c757d';
            a.style.color = 'white';
            a.style.textDecoration = 'none';
            a.style.borderRadius = '5px';
            a.style.minWidth = '200px';

            li.appendChild(a);
            searchList.appendChild(li);
        }
    }

    container.appendChild(searchList);

    return container;
}