About

Every digital image is a two-dimensional grid of discrete color samples. Each sample, a pixel, stores 4 channel values: R (red), G (green), B (blue), and A (alpha/opacity), each in the range [0, 255]. This tool reads your image file, renders it onto an internal Canvas element, and calls getImageData() to extract the actual RGBA buffer. The result is a structured array of row objects, not a simulation or approximation. You get the real pixel values the browser decoded from the compressed format (JPEG, PNG, WebP, etc.).

Incorrect pixel extraction leads to color drift in data visualizations, broken sprite maps in game development, and corrupted training data for computer vision pipelines. This converter handles images up to 50 MB with optional downscaling to manage memory. It supports JSON and CSV export, optional alpha channel inclusion, and a pixel-sort effect that reorders pixels by luminance. Note: canvas operates in premultiplied-alpha sRGB color space. Slight rounding may occur for semi-transparent pixels due to premultiplication. For lossless extraction, use PNG source files.

Formulas

The raw pixel buffer returned by the Canvas API is a flat Uint8ClampedArray of length W × H × 4. To locate a specific pixel at row y, column x:

index = (y × W + x) × 4

The four bytes at that index represent:

R = data[index] , G = data[index + 1] , B = data[index + 2] , A = data[index + 3]

Relative luminance for pixel sorting uses the ITU-R BT.709 coefficients:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Total raw buffer size in bytes:

S = W × H × 4 bytes

Where W = image width in pixels, H = image height in pixels, R, G, B, A = channel values [0 - 255], L = relative luminance, S = buffer size, index = byte offset into the flat array.

Reference Data

Image Format	Extension	Color Depth	Alpha Support	Compression	Typical Use	Canvas Decode
PNG	.png	8/16/24/32 bit	Yes	Lossless (DEFLATE)	Graphics, UI, sprites	Exact
JPEG	.jpg/.jpeg	24 bit	No	Lossy (DCT)	Photos	Lossy decode
WebP	.webp	24/32 bit	Yes	Lossy/Lossless	Web images	Browser-dependent
GIF	.gif	8 bit (indexed)	Binary (1-bit)	Lossless (LZW)	Animation, simple graphics	First frame only
BMP	.bmp	1 - 32 bit	Optional	None/RLE	Legacy systems	Exact
AVIF	.avif	8/10/12 bit	Yes	Lossy/Lossless (AV1)	Modern web	Browser-dependent
SVG	.svg	Vector (rasterized)	Yes	None (XML text)	Icons, logos	Rasterized at set size
ICO	.ico	1 - 32 bit	Yes	None/PNG	Favicons	Largest variant
TIFF	.tiff	1 - 64 bit	Yes	Various	Print, scanning	Not supported
HEIC	.heic	8/10 bit	Yes	Lossy (HEVC)	Apple devices	Not supported
Color Channel Reference
Channel	Symbol	Range	Bits	Premultiplied	Description	Formula Weight
Red	R	0 - 255	8	Yes (canvas)	Red intensity	0.2126 (luminance)
Green	G	0 - 255	8	Yes (canvas)	Green intensity	0.7152 (luminance)
Blue	B	0 - 255	8	Yes (canvas)	Blue intensity	0.0722 (luminance)
Alpha	A	0 - 255	8	Multiplied into RGB	Opacity	N/A
Memory Estimation by Resolution
Resolution	Pixels	Raw RGBA Size	JSON ~Size	CSV ~Size	Megapixels	Processing Time*
640×480	307,200	1.2 MB	~12 MB	~4 MB	0.3 MP	< 100 ms
1280×720	921,600	3.5 MB	~36 MB	~12 MB	0.9 MP	~200 ms
1920×1080	2,073,600	7.9 MB	~80 MB	~27 MB	2.1 MP	~500 ms
3840×2160	8,294,400	31.6 MB	~320 MB	~107 MB	8.3 MP	~2 s

Frequently Asked Questions

JPEG uses lossy DCT-based compression. During encoding, high-frequency color data is discarded. When the browser decodes a JPEG onto the canvas, the reconstructed pixel values are approximations of the originals. Compression artifacts introduce errors typically in the range of ±2 to ±5 per channel. For exact pixel-level fidelity, use PNG (lossless) as your source format.

The HTML Canvas API stores pixels with premultiplied alpha. This means each RGB channel is multiplied by the alpha value divided by 255 before storage. For a pixel with R=200, A=128, the stored red value is approximately round(200 × 128 / 255) = 100. When you read back via getImageData(), the browser un-premultiplies, but rounding errors may cause the recovered value to differ by ±1. Fully opaque pixels (A=255) are unaffected.

Each pixel generates roughly 40-50 bytes of JSON text (keys, values, delimiters). A 1920×1080 image (2,073,600 pixels) produces approximately 80-100 MB of JSON. A 4K image (8.3 megapixels) can exceed 300 MB. Use the downscale option or CSV format (which omits key names) to reduce output size. The tool warns you before processing images over 2 megapixels.

No. The pixel-sort effect operates on a copy of the extracted pixel array in memory. It reorders pixels by their luminance value (sum of R+G+B or BT.709 weighted) and renders the result to a separate preview canvas. Your original file is never modified. You can export the sorted result as a PNG via the canvas toBlob API.

The Canvas API draws only the first frame of an animated GIF. Multi-frame extraction requires parsing the GIF binary format directly (LZW decompression of each frame's sub-image). This tool extracts the first frame only. For full animation frame extraction, a dedicated GIF parser library would be required.

This tool processes local files loaded via the File API, so cross-origin restrictions do not apply. However, if you were to load an image from an external URL onto a canvas without proper CORS headers, the canvas becomes "tainted" and getImageData() throws a SecurityError. This tool avoids that by using only local file uploads and data URLs.

The flat array format outputs a single array of pixel objects in left-to-right, top-to-bottom scan order - identical to how getImageData() returns data. The row-based JSON nests pixels into arrays per row: output[y][x] gives you the pixel at column x, row y. Row-based is easier for 2D operations (image manipulation, per-row processing). Flat is smaller and matches the native buffer layout.