Photo Black And White Yellow Filter Effect Tool

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

    // Ensure the image is loaded and has valid dimensions.
    // originalImg is expected to be an HTMLImageElement that has finished loading.
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    if (width === 0 || height === 0) {
        // This can happen if the image isn't loaded yet or is invalid.
        console.error("Image has not loaded or has zero dimensions. Cannot process.");
        // Return an empty or minimal canvas to avoid further errors downstream.
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

    canvas.width = width;
    canvas.height = height;

    // Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Get the pixel data from the canvas
    const imageData = ctx.getImageData(0, 0, width, height);
    const pixels = imageData.data; // This is a Uint8ClampedArray

    // Coefficients for simulating a B+W Yellow #8 filter effect.
    // These weights are chosen to mimic how a yellow filter affects light:
    // - It passes red and green light well.
    // - It absorbs (reduces) blue light.
    // This typically results in darker skies and lighter reds/yellows/greens in the B&W image.
    // The sum of coefficients (0.35 + 0.60 + 0.05) is 1.0, which helps maintain overall brightness.
    const rCoeff = 0.35;
    const gCoeff = 0.60;
    const bCoeff = 0.05;

    for (let i = 0; i < pixels.length; i += 4) {
        const r = pixels[i];     // Red value
        const g = pixels[i + 1]; // Green value
        const b = pixels[i + 2]; // Blue value
        // pixels[i + 3] is the alpha channel, which we'll leave unchanged.

        // Calculate the grayscale value using the yellow filter coefficients.
        // Math.round is used to get an integer result for pixel channel values.
        const gray = Math.round(rCoeff * r + gCoeff * g + bCoeff * b);
        
        // Update the pixel data with the new grayscale values.
        // The Uint8ClampedArray 'pixels' will automatically clamp 'gray' to the 0-255 range.
        pixels[i] = gray;     // Set Red channel to gray
        pixels[i + 1] = gray; // Set Green channel to gray
        pixels[i + 2] = gray; // Set Blue channel to gray
    }

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

    // Return the canvas with the B+W yellow filter effect applied
    return canvas;
}