Image Black And White Effect With Orange Filter

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

    // Ensure the image object is loaded and has dimensions
    if (!originalImg || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Image not loaded or is a zero-size image.");
        // Return a small, empty canvas as a fallback
        canvas.width = 1;
        canvas.height = 1;
        return canvas;
    }

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

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

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

    // Define the factors for the orange color (#FFA500 -> R=255, G=165, B=0)
    // These factors will be applied to the grayscale value.
    const orangeR_Factor = 1.0;         // Corresponds to 255/255
    const orangeG_Factor = 165 / 255;   // Corresponds to 165/255 (approx 0.647)
    const orangeB_Factor = 0.0;         // Corresponds to 0/255

    // Iterate over each pixel
    // Each pixel is 4 components: R, G, B, A
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        // Alpha channel data[i+3] is preserved

        // Convert to grayscale using the luminosity method
        // gray = 0.299 * R + 0.587 * G + 0.114 * B
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;

        // Apply the orange filter effect by scaling the grayscale value
        // with the orange color factors.
        // Math.round is used for explicit rounding, though Uint8ClampedArray would handle it.
        data[i]   = Math.round(gray * orangeR_Factor); // Red channel
        data[i+1] = Math.round(gray * orangeG_Factor); // Green channel
        data[i+2] = Math.round(gray * orangeB_Factor); // Blue channel
        // data[i+3] (alpha) remains unchanged
    }

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

    return canvas;
}