Image Filters

Image Filters is a two-layer editor: a stack of 11 global adjustment sliders runs first, then a chain of stackable effects runs on top. The adjustments are not the naive add-a-number kind. Exposure is a true multiply in stops (each pixel channel is scaled by Math.pow(2, exposure/100)), so pushing it positive clips highlights rather than greying the whole frame; contrast pivots around mid-grey 128; and Highlights and Shadows are luminance-aware, splitting each pixel at a Rec.601 luminance of 128 (0.299R + 0.587G + 0.114B) and only lifting or crushing the tones on the correct side of that line. Vibrance is a 'smart' saturation that weights its effect by 1 - (maxChannel - grey)/255, where grey is the channel average, so it boosts muted colors more than already-saturated ones, while the plain Saturation slider scales every pixel away from that same grey average uniformly. Clarity is a local-contrast (unsharp-mask-style) pass over a 5-pixel radius that is deliberately skipped entirely unless its absolute value is at least 5, since the per-pixel neighborhood loop is the most expensive adjustment.

On top of adjustments you can stack any of 22 effects, organized into Artistic, Color, Vintage, Effects, and Creative tabs, each with its own intensity range. Several are real convolution or analysis kernels rather than CSS shortcuts: Sharpen applies the 3x3 kernel [0,-1,0,-1,5,-1,0,-1,0] blended toward identity by the intensity slider; Emboss uses [-2,-1,0,-1,1,1,0,1,2] and re-centers around 128; Oil Painting bins each neighborhood's pixels into 20 brightness levels and repaints with the average color of the most populated bin; Halftone reduces blocks to ink dots whose radius tracks block brightness; and Chromatic Aberration physically shifts the red and blue channels horizontally by up to 10 pixels. Color effects like Hue Shift do a full RGB to HSL round-trip to rotate hue by a 0-360 degree amount, and Duotone maps luminance across a fixed dark-purple (50,0,100) to warm-gold (255,200,100) ramp. Because effects are applied strictly in the order you added them, the stack is order-dependent: sharpening before a blur is not the same as blurring before a sharpen, since each effect reads the output of the previous one.

The 21 built-in presets are Instagram-style recipes that pre-load specific adjustment values plus effect chains, for example Nashville sets temperature +20, saturation -10, contrast +10 and adds a 0.4 vignette, while Noir drives saturation to -100 with +30 contrast and -20 blacks, and the 70s Film preset layers film-grain at 40 with a 0.4 vignette. You can save your own slider-and-effect combinations as named custom presets, which persist in browser localStorage under the key imageFilters-customPresets, and an undo button walks back through the last 20 edit states. A split-screen compare slider wipes between the original and filtered versions. To stay responsive the live preview is rendered on a canvas downscaled to a maximum 800px long edge and encoded as JPEG at 0.9 quality, but the Download button re-runs the entire adjustment-and-effect pipeline on the full-resolution image and exports a lossless PNG (quality 1.0) named after your original file with a -filtered suffix. All processing happens on a local canvas in your browser; the image is never uploaded.