Professional Image Editor

function processImage(
    originalImg,
    brightness = 100,
    contrast = 100,
    saturation = 100,
    blur = 0,
    grayscale = 0,
    sepia = 0,
    hueRotate = 0,
    rotation = 0,
    flipHorizontal = 0,
    flipVertical = 0
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Parse parameters to numbers
    const rad = Number(rotation) * Math.PI / 180;
    const w = originalImg.width;
    const h = originalImg.height;

    // Calculate new dimensions to avoid clipping for arbitrary angle rotations
    const newW = Math.abs(w * Math.cos(rad)) + Math.abs(h * Math.sin(rad));
    const newH = Math.abs(w * Math.sin(rad)) + Math.abs(h * Math.cos(rad));

    canvas.width = Math.ceil(newW);
    canvas.height = Math.ceil(newH);

    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    ctx.save();
    
    // Move to the center of the newly calculated canvas
    ctx.translate(centerX, centerY);
    
    // Rotate canvas
    ctx.rotate(rad);

    // Apply flips
    const scaleX = Number(flipHorizontal) ? -1 : 1;
    const scaleY = Number(flipVertical) ? -1 : 1;
    ctx.scale(scaleX, scaleY);

    // Parse filter values
    const filterBrightness = Number(brightness);
    const filterContrast = Number(contrast);
    const filterSaturation = Number(saturation);
    const filterBlur = Number(blur);
    const filterGrayscale = Number(grayscale);
    const filterSepia = Number(sepia);
    const filterHueRotate = Number(hueRotate);

    // Apply combined filters to the context
    ctx.filter = `
        brightness(${filterBrightness}%) 
        contrast(${filterContrast}%) 
        saturate(${filterSaturation}%) 
        blur(${filterBlur}px) 
        grayscale(${filterGrayscale}%) 
        sepia(${filterSepia}%) 
        hue-rotate(${filterHueRotate}deg)
    `.replace(/\s+/g, ' ').trim();

    // Draw original image centered on the canvas
    ctx.drawImage(originalImg, -w / 2, -h / 2, w, h);

    ctx.restore();

    return canvas;
}