Klasky Csupo Image Effect Generator

function processImage(originalImg, mirrorMode = "none", hueShift = "140", saturation = "400", contrast = "250") {
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    // Create a temporary canvas to apply the harsh color alterations
    // The "Klasky Csupo" / YTP meme effect traditionally involves
    // inverting the colors, shifting the hue to harsh magenta/cyan tones,
    // and drastically increasing saturation and contrast.
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    const tempCtx = tempCanvas.getContext('2d');

    const hue = parseFloat(hueShift) || 140;
    const sat = parseFloat(saturation) || 400;
    const con = parseFloat(contrast) || 250;

    // Apply the deep-fried/inverted alien color palette
    tempCtx.filter = `invert(100%) hue-rotate(${hue}deg) saturate(${sat}%) contrast(${con}%)`;
    tempCtx.drawImage(originalImg, 0, 0, width, height);

    // Render to main canvas handling the classic symmetry/mirror meme styles
    if (mirrorMode.toLowerCase() === "horizontal") {
        const halfWidth = width / 2;
        // Draw the left half normally
        ctx.drawImage(tempCanvas, 0, 0, halfWidth, height, 0, 0, halfWidth, height);
        // Draw the left half flipped onto the right side
        ctx.save();
        ctx.scale(-1, 1);
        ctx.drawImage(tempCanvas, 0, 0, halfWidth, height, -width, 0, halfWidth, height);
        ctx.restore();
    } else if (mirrorMode.toLowerCase() === "vertical") {
        const halfHeight = height / 2;
        // Draw the top half normally
        ctx.drawImage(tempCanvas, 0, 0, width, halfHeight, 0, 0, width, halfHeight);
        // Draw the top half flipped onto the bottom side
        ctx.save();
        ctx.scale(1, -1);
        ctx.drawImage(tempCanvas, 0, 0, width, halfHeight, 0, -height, width, halfHeight);
        ctx.restore();
    } else {
        // "none" or unrecognized inputs will just draw the color-shifted image
        ctx.drawImage(tempCanvas, 0, 0, width, height);
    }

    return canvas;
}