Image Transparency Checker

function processImage(originalImg) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    canvas.width = originalImg.naturalWidth || originalImg.width;
    canvas.height = originalImg.naturalHeight || originalImg.height;

    ctx.drawImage(originalImg, 0, 0);

    let hasTransparency = false;
    try {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        for (let i = 3; i < data.length; i += 4) { // Iterate over alpha channel
            if (data[i] < 255) {
                hasTransparency = true;
                break;
            }
        }
    } catch (e) {
        // Cross-origin issues can prevent getImageData.
        // In this case, we can't definitively check for transparency client-side without CORS.
        // We'll return a message indicating this.
        console.error("Error accessing image data (possibly due to CORS):", e);
        const resultElement = document.createElement('p');
        resultElement.style.padding = '10px';
        resultElement.style.fontFamily = 'Arial, sans-serif';
        resultElement.textContent = 'Could not check transparency: Unable to access image pixel data. This might be due to cross-origin restrictions if the image is hosted on a different domain.';
        return resultElement;
    }

    const resultElement = document.createElement('p');
    resultElement.style.padding = '10px';
    resultElement.style.fontFamily = 'Arial, sans-serif';
    resultElement.style.fontSize = '16px';
    resultElement.style.textAlign = 'center';

    if (hasTransparency) {
        resultElement.textContent = 'The image contains transparent pixels.';
        resultElement.style.color = 'green';
    } else {
        resultElement.textContent = 'The image does not contain transparent pixels (it is fully opaque).';
        resultElement.style.color = 'red';
    }

    // For better visualization, we can also display the image itself on a checkerboard background.
    // This is a common way to visually inspect transparency.
    const container = document.createElement('div');

    const checkerboardSize = 10;
    const checkerboardCanvas = document.createElement('canvas');
    checkerboardCanvas.width = canvas.width;
    checkerboardCanvas.height = canvas.height;
    const chCtx = checkerboardCanvas.getContext('2d');

    for (let y = 0; y < checkerboardCanvas.height; y += checkerboardSize) {
        for (let x = 0; x < checkerboardCanvas.width; x += checkerboardSize) {
            chCtx.fillStyle = ((x / checkerboardSize + y / checkerboardSize) % 2 === 0) ? '#ccc' : '#fff';
            chCtx.fillRect(x, y, checkerboardSize, checkerboardSize);
        }
    }

    const displayCanvas = document.createElement('canvas');
    displayCanvas.width = canvas.width;
    displayCanvas.height = canvas.height;
    const dCtx = displayCanvas.getContext('2d');
    dCtx.drawImage(checkerboardCanvas, 0, 0);
    dCtx.drawImage(originalImg, 0, 0);

    displayCanvas.style.border = '1px solid #ccc';
    displayCanvas.style.maxWidth = '100%';
    displayCanvas.style.display = 'block';
    displayCanvas.style.margin = '10px auto';


    container.appendChild(resultElement);
    container.appendChild(displayCanvas);

    return container;
}