Please bookmark this page to avoid losing your image tool!

Image Alpha Channel Extractor And Viewer

(Free & Supports Bulk Upload)

The result will appear here...

JavaScript Code (For Advanced Users)

You can edit the below JavaScript code to customize the image tool.

function processImage(originalImg, invertMode = 0) {
    const canvas = document.createElement('canvas');
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;
    
    canvas.width = width;
    canvas.height = height;
    
    const ctx = canvas.getContext('2d');
    
    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);
    
    try {
        // Get the image data to manipulate pixel by pixel
        const imageData = ctx.getImageData(0, 0, width, height);
        const data = imageData.data;
        const invert = Number(invertMode) === 1;
        
        for (let i = 0; i < data.length; i += 4) {
            // Extract the alpha value (0 to 255)
            let alpha = data[i + 3];
            
            // Invert the alpha channel if requested
            if (invert) {
                alpha = 255 - alpha;
            }
            
            // In an alpha mask, we represent transparency as grayscale
            // (e.g., fully opaque = white, fully transparent = black)
            data[i] = alpha;       // Red
            data[i + 1] = alpha;   // Green
            data[i + 2] = alpha;   // Blue
            
            // Set the pixel to be fully opaque so we can visually see the mask
            data[i + 3] = 255;     // Alpha
        }
        
        // Put the modified image data back onto the canvas
        ctx.putImageData(imageData, 0, 0);
    } catch (err) {
        console.error("Could not extract alpha channel. Ensure the image is not cross-origin tainted.", err);
    }
    
    return canvas;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Create a custom image tool

Description

This tool allows users to extract and visualize the alpha channel (transparency layer) of an image. It converts the transparency information into a grayscale mask, where different shades of gray represent varying levels of opacity. The tool also includes an inversion feature, which is useful for converting transparency masks into solid masks and vice versa. This is particularly helpful for graphic designers and digital artists who need to inspect, debug, or prepare transparency layers for compositing and masking workflows.

JavaScript Code (For Advanced Users)

Free Image Tool Creator

Description

Leave a Reply Cancel reply

Other Image Tools: