Tools · Making-of

Photo Filters

About this project

What it is

A filter tool that gives your photos the color of three camera makers. It imitates Fujifilm's 14 film simulations (PROVIA, Velvia, ASTIA, Classic Chrome, PRO Neg. Hi and Std, Classic Neg., Nostalgic Neg., ETERNA, ETERNA Bleach Bypass, REALA ACE, ACROS, Monochrome, Sepia) and the Ricoh GR's 12 image controls (Standard, Vivid, Positive Film, Negative Film, Bleach Bypass, Retro, HDR Tone, Cross Processing, Monotone, Soft and Hard Monotone, Hi-Contrast B&W), plus four black-and-white looks after Leica's dedicated B&W Monochrom cameras (Monochrom, High Contrast, Selenium, Sepia). Crop, rotate, resize and compression happen on the same screen, and you can use it just to shrink a file without any filter. Open several photos at once and they all save with the same settings. Your photo is never uploaded; it is processed only in this browser.

How to use it

Data and method

Each filter is a set of values: a tone curve, per-channel curves, a color mix, saturation, tints added to shadows and highlights, grain and vignetting. The browser's WebGL (graphics processor) draws them in one pass. The character of each filter is matched to how Fujifilm and Ricoh describe it in manuals and product material (for example, Classic Chrome's muted color and firm shadows, Positive Film's strong contrast and rich color). The preview uses a reduced copy of the photo, and saving redraws it at full resolution. Grain and vignetting scale with the image, so the saved file looks like the preview.

Limits

The day after the PDF converter, the question was whether the site could do photo filters too. Then came: did I know the Fujifilm and Ricoh filters? Build them under those names, with crop and resize as well.

One shader

Photo editors usually run each effect as its own step. Here everything sits in one WebGL shader. For every pixel on screen it maps the crop coordinate back to the original (rotation and flip included), applies sharpening, exposure and contrast, runs the filter's color mix and curves, then adds vignetting and grain. The order is fixed, so each slider move redraws from the original. A 12-megapixel photo is previewed from a 2048-pixel copy, so the result changes before you let go.

26 filters as numbers

The 14 Fujifilm and 12 Ricoh GR looks are each written as a tone curve, per-channel curves, a 3×3 color mix, saturation, tints added to shadows and highlights, grain and vignetting. Classic Chrome drops saturation to 0.72 and presses down the shadow end of the curve. Positive Film steepens the curve and mixes a little green into blue to pull it toward teal. ACROS and Monochrome get the camera's yellow, red and green B&W filters, which change how red, green and blue are weighted when converting to gray. Pick red and a blue sky goes dark.

With the values set, all 26 went onto one test image, an Everest photo beside a portrait, laid out on a single sheet for comparison. Hi-Contrast B&W nearly swallowed the portrait against its dark background, so its curve was eased; Classic Neg. turned the background too blue, so the teal added to its shadows was reduced.

Making the saved file match the preview

Grain made in screen pixels would be three times coarser in a 2048-pixel preview than in a 6000-pixel save. So grain and vignetting are computed as fractions of the image size. When saving, the image is drawn at no more than twice the target size and then halved on a 2D canvas to avoid jagged edges. iPhone Safari returns a blank image once a single canvas passes about 16.7 million pixels; saving a 6000 × 3000 test photo (18 million pixels) at full size did come out at 5656 × 2828, and the page said so.

Cropping

The crop frame is a box laid over the photo. Dragging a corner resizes it with the opposite corner pinned; with a fixed ratio, whichever side moved less is adjusted to match. Coordinates are kept only as fractions from 0 to 1, so when the preview changes size, they carry over unchanged to the original pixels at save time.

Try Photo Filters Go to ghmun.com/en/filter →