Image Histogram
View RGB and luminance channel distributions of an image.
Image Histogram turns any photo into four 256-bin distribution charts — Red, Green, Blue, and Luminance — so you can see exactly where its tones live. Drop one image, hit "Compute Histogram" (the button reads "Analyzing..." while it runs), and the canvas-drawn charts appear side by side at 0.6 alpha, each 256×100 pixels. Below them, "Dimensions" and "Total Pixels" cards summarize the source.
The tool is diagnostic: it tells you about exposure, channel balance, and clipping without altering the file. Everything runs on local canvas ImageData — no upload, no network, no AI — and "Analyze Another" (or the corner clear button on the preview) resets the card for a fresh file.
How it works
The file loads through an object URL onto a canvas, then getImageData walks every pixel and counts samples into four 256-bin arrays: one each for red, green, and blue, plus luminance computed with the ITU-R BT.601 formula 0.299*R + 0.587*G + 0.114*B — the same brightness model many video standards use. normalizeHistogram divides every bin by the peak so relative shape is visible regardless of absolute counts.
State lives in Redux histogramSlice (item, dims, histogram, isProcessing). The StepIndicator's currentStep expression keeps the card on step "Analyze" after computation. There are no third-party libraries — binning is pure Canvas 2D API, fully offline.
How to use
- Drop one image into the dropzone (accept image/*; label "Click or drag and drop to add files").
- The preview loads with dimensions read into Redux; use the corner clear icon-button to reset if needed.
- Click "Compute Histogram" — the button switches to "Analyzing..." while pixels are binned.
- Read the four channel charts: Red, Green, Blue, and Luminance.
- Check the "Dimensions" ({width}×{height}) and "Total Pixels" (toLocaleString) cards below the charts.
- Toast "Histogram computed!" confirms completion; errors surface as "Error computing histogram".
- Click "Analyze Another" (or the preview clear button) to restart with a new file.
Tips
- A spike pinned at 0 or 255 indicates clipped shadows or highlights — re-export the source with better exposure.
- Luminance uses BT.601 coefficients, the same model as many video standards — useful when checking exposure for video stills.
- Single-file tool: the dropzone takes files[0], so clear the current image before dropping another.
- Total Pixels equals width × height; histograms always use 256 bins regardless of the source's bit depth.
Image Histogram FAQ
Is my image uploaded anywhere?
No — binning runs entirely in the browser on canvas ImageData; there is no network, no AI.
What does the Luminance chart show?
BT.601-weighted brightness (0.299R + 0.587G + 0.114B) counted into the same 256 bins as the RGB channels.
Can I analyze multiple images at once?
No — the dropzone is multiple={false}; clear first (Analyze Another or the preview clear button) to load another file.
What do the chart heights mean?
Bars are normalized by the peak bin (normalizeHistogram), so you see the relative distribution shape rather than raw counts.
Can I export the histogram data?
No download button exists — results are on-screen only (four charts plus the Dimensions and Total Pixels stats).
Credits
- Canvas 2D API — Pixel sampling, binning, and chart drawing