Image Green Filter Black And White Effect Tool

function processImage(originalImg) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the intrinsic dimensions of the image
    // naturalWidth/naturalHeight are the actual dimensions of the loaded image
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Set canvas dimensions to match the image
    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // If image dimensions are zero (e.g., image not loaded yet or invalid),
    // return an empty canvas. The caller should handle image loading.
    if (imgWidth === 0 || imgHeight === 0) {
        console.warn("Image dimensions are zero. Please ensure the image is loaded and valid before processing.");
        // Return the canvas, which will be empty or reflect the 0x0 dimensions.
        // This indicates to the caller that processing could not occur as expected.
        return canvas;
    }

    // Draw the original image onto the canvas.
    // This step is necessary to be able to get its pixel data.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Get the ImageData object from the canvas.
    let imageData;
    try {
        imageData = ctx.getImageData(0, 0, imgWidth, imgHeight);
    } catch (e) {
        console.error("Could not get image data. This might be due to Cross-Origin Resource Sharing (CORS) restrictions if the image is from another domain. The original image (or an empty canvas if drawing failed) will be returned.", e);
        // In case of error (e.g. CORS), pixel processing cannot be done.
        // The canvas currently holds the original image (if drawImage succeeded).
        // Returning it is a fallback.
        return canvas;
    }
    
    const data = imageData.data; // This is a Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

    // Iterate over each pixel in the image data.
    // Each pixel consists of 4 components: Red, Green, Blue, Alpha.
    // We increment by 4 in each step to move to the next pixel.
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];   // Red value of the current pixel
        const g = data[i+1]; // Green value of the current pixel
        const b = data[i+2]; // Blue value of the current pixel
        // data[i+3] is the Alpha value, which will be preserved.

        // Calculate the grayscale value using weights that simulate a green filter.
        // A green filter in black and white photography typically makes green objects appear lighter
        // and objects of other colors (especially red and blue) appear darker.
        // The weights chosen here (R:0.2, G:0.7, B:0.1) emphasize the green channel.
        // Эти коэффициенты суммируются до 1.0.
        const gray = (0.2 * r) + (0.7 * g) + (0.1 * b);

        // Apply the calculated grayscale value to the R, G, and B components of the pixel.
        // This converts the pixel to a shade of gray.
        data[i] = gray;      // Set Red component
        data[i+1] = gray;    // Set Green component
        data[i+2] = gray;    // Set Blue component
        // The Alpha component (data[i+3]) remains unchanged, preserving transparency.
    }

    // Put the modified pixel data back onto the canvas.
    ctx.putImageData(imageData, 0, 0);

    // Return the canvas element containing the processed image.
    return canvas;
}