Image Film Effect Creator

/**
 * Applies a film-like effect to an image using canvas filters.
 *
 * @param {Image} originalImg The original image object.
 * @param {number} [sepia=0.3] The intensity of the sepia effect (0 to 1). Default is 0.3.
 * @param {number} [contrast=1.2] The contrast level (1 is normal). Default is 1.2.
 * @param {number} [brightness=1.0] The brightness level (1 is normal). Default is 1.0.
 * @param {number} [saturation=1.1] The saturation level (1 is normal). Default is 1.1.
 * @param {number} [hueRotate=0] The degrees to rotate the hue (0 to 360). Default is 0.
 * @returns {HTMLCanvasElement} A canvas element with the film effect applied.
 */
function processImage(originalImg, sepia = 0.3, contrast = 1.2, brightness = 1.0, saturation = 1.1, hueRotate = 0) {
    // Ensure parameters are numbers, providing defaults if conversion fails
    const numSepia = isNaN(Number(sepia)) ? 0.3 : Number(sepia);
    const numContrast = isNaN(Number(contrast)) ? 1.2 : Number(contrast);
    const numBrightness = isNaN(Number(brightness)) ? 1.0 : Number(brightness);
    const numSaturation = isNaN(Number(saturation)) ? 1.1 : Number(saturation);
    const numHueRotate = isNaN(Number(hueRotate)) ? 0 : Number(hueRotate);

    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the image dimensions
    // Use naturalWidth/Height to get the original dimensions
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Construct the CSS filter string
    // Note: Filter order can subtly affect the final look
    const filterString = `sepia(${numSepia}) contrast(${numContrast}) brightness(${numBrightness}) saturate(${numSaturation}) hue-rotate(${numHueRotate}deg)`;

    // Apply the filter to the canvas context
    ctx.filter = filterString;

    // Draw the image onto the canvas. The filter will be applied during this draw operation.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // The canvas itself is the element to be returned.
    // It can be directly appended to the DOM or its content used.
    return canvas;
}