Image Circular Polarizer Filter Effect Tool

function processImage(originalImg, saturationLevel = 1.3, contrastLevel = 1.2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Determine the dimensions of the original image.
    // Use naturalWidth/naturalHeight for intrinsic dimensions of an HTMLImageElement.
    // Fallback to width/height for other types like HTMLCanvasElement or if natural dimensions aren't available.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // If the image has no dimensions (e.g., not loaded, or an invalid image source),
    // set canvas dimensions to 0x0 and return it.
    // This avoids errors when trying to draw a 0-dimension image or create a 0-dimension canvas context.
    if (imgWidth === 0 || imgHeight === 0) {
        canvas.width = 0;
        canvas.height = 0;
        // Optionally, one might log a warning here if appropriate for the application.
        // console.warn("processImage: Original image has zero width or height. Returning an empty canvas.");
        return canvas;
    }

    canvas.width = imgWidth;
    canvas.height = imgHeight;
    
    // Apply saturation and contrast filters using the canvas context's filter property.
    // The saturationLevel and contrastLevel parameters can be numbers (e.g., 1.3 means 130%)
    // or strings (e.g., "130%"). The CSS filter syntax, used by ctx.filter, supports both forms.
    // Default values are numeric factors.
    // Example: saturate(1.3) results in 130% saturation. contrast(1.2) results in 120% contrast.
    // A value of 1 means no change, 0 for saturate means grayscale, 0 for contrast means flat gray.
    ctx.filter = `saturate(${saturationLevel}) contrast(${contrastLevel})`;
    
    // Draw the original image onto the canvas. The filter is applied during this drawing operation.
    // The image is drawn at its determined width and height, filling the canvas.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
    
    // After drawing, the filter property on the context persists.
    // If the same context were to be reused for other drawing operations that shouldn't
    // have this filter, it would be necessary to reset it (e.g., ctx.filter = 'none';).
    // However, since this function creates a new canvas and context for each call and
    // returns the canvas (not the context), resetting the filter here is not strictly
    // necessary for the function's output.

    return canvas;
}