Image Overlay and Pixel Difference Comparator
Compare equal-size images with adjustable onion opacity, a draggable vertical wipe and red pixel differences; download the current PNG view.
About this image overlay and pixel difference comparator
Compare equal-size images with adjustable onion opacity, a draggable vertical wipe and red pixel differences; download the current PNG view Processes media assets directly in the browser using HTML5 Canvas and WebAssembly decoders, ensuring zero file uploads.
Image processing & canvas pipeline
Applies 2D image convolution filters, pixelation, and EXIF metadata sanitization directly to raw RGBA ImageData buffers. Privacy tools apply Gaussian blur kernels or block pixelation to obscure sensitive areas (faces, license plates, credentials). EXIF metadata scrubbing parses TIFF/JPEG binary application segments (APP1, markers 0xFFE1), stripping GPS latitude/longitude, camera serial numbers, device models, and timestamps while preserving image pixel data intact. Generates ISO/IEC 18004 QR codes.
Worked image transformation example
Scenario: Compare a four-color 12×9 PNG with its RGB-inverted counterpart.
Sample input:
Processing: Canvas compares unresized RGBA buffers.
Illustrative output:
Resolution, dimension & memory limits
Operational constraints and validation boundaries: Overlay panel: local PNG/JPEG/WebP, each file smaller than 25 MB, each side at most 4096px and at most 8,388,608 pixels per image. Dimensions must match. Percentage is an integer 0–100. No tolerance, perceptual matching, feature alignment or Pixelmatch certification. Canvas-decoded colors may differ from encoded profiles or transparent RGB. No remote images, animation or metadata retention. The original JSON panel retains its 16-million-pixel cap and also requires each compared file below 25 MB.
Image Overlay and Pixel Difference Comparator image operations execute in client memory via HTML5 Canvas and browser decoders. Inspect output previews before replacing source assets.
In-memory image processing boundary
File buffers and document assets in Image Overlay and Pixel Difference Comparator are processed in-memory via local browser APIs with zero file uploads to CZOA servers.
Image format & W3C Canvas standards
W3C Canvas 2D context specifications and standard image container formats:
- WHATWG Canvas 2D
Image Overlay and Pixel Difference Comparator verification · Audit standards
How to use it
- Enter, paste, or select your input data into the Image Overlay and Pixel Difference Comparator workspace controls.
Frequently asked questions
How do onion opacity, wipe and red differences work?+
Operational requirements for "How do onion opacity, wipe and red differences work?" are verified in local memory during execution of Image Overlay and Pixel Difference Comparator.
What controls does Image Difference Metrics provide?+
Choose two equal-size images. Coordinates align at the top-left without resizing or feature matching. Onion mode composites B over A with the selected opacity using source-over alpha. Wipe shows B on the left and A on the right; drag the image or use the percentage slider. The boundary is floor(width × percentage / 100). Highlight marks any decoded RGBA change opaque red and keeps unchanged A pixels. The metrics use exact decoded RGBA differences in every mode. Example: two opaque 2×1 images, A red/blue and B red/green, have one changed pixel (50%); highlight is red/red and a 50% wipe is red/blue. Download saves the current view, without the checkerboard. The original JSON tool remains below.
What limits apply to image difference metrics?+
Overlay panel: local PNG/JPEG/WebP, each file smaller than 25 MB, each side at most 4096px and at most 8,388,608 pixels per image. Dimensions must match.
What result and limits should I expect when using Image Difference Metrics?+
Original exact RGBA JSON comparison: Download the paired 12×9 examples, select both, and process locally. Every pixel differs in RGB, so expect changedPixels 108, changedRatio 1 and meanRgbaDelta 191.25. This is a decoded-pixel comparison, not a heatmap or a metadata comparison.