User Rating 0.0 ★★★★★

Total Usage 0 times

Category Image Converters

Drop image here or click to browse PNG, JPG, WebP, BMP, GIF • Max 20 MB

Include RGBA data array Include transparencyList Pretty-print JSON (indented)

Output JSON

Is this tool helpful?

Your feedback helps us improve.

★ ★ ★ ★ ★

About

Raw pixel data extraction from images is a foundational operation in procedural graphics, sprite-sheet tooling, and embedded display programming. This converter reads any raster image (PNG, JPG, WebP, BMP, GIF) client-side using the Canvas API's getImageData method, producing a JSON object containing width, height, an RGBA data array (values 0 - 255), and an optional transparencyList string. The transparencyList encodes each pixel as 1 (alpha > 0) or 0 (fully transparent), useful for collision masks and hit-testing without transmitting full alpha channels. No server upload occurs. Processing happens entirely in your browser's memory.

Limitations: browsers enforce a maximum canvas area (typically 16384 × 16384 pixels or ~268 megapixels total). Images exceeding this will fail silently or produce corrupted output. Cross-origin images loaded from external URLs cannot be read due to CORS taint restrictions. The output JSON for large images can exceed hundreds of megabytes. A 4000 × 3000 image produces 48,000,000 RGBA entries. Consider whether you truly need the full data array or if the compact transparencyList suffices.

Formulas

The Canvas API method getImageData(x, y, w, h) returns an ImageData object containing a flat Uint8ClampedArray of RGBA values. Each pixel occupies 4 consecutive indices.

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

Total array length:

L = width × height × 4

The transparencyList is constructed by iterating every 4th element (the alpha channel) of the pixel data array:

transparencyList[p] =

{

1 if data[p × 4 + 3] > 00 if data[p × 4 + 3] = 0

Where p ranges from 0 to width × height − 1. The pixel index p maps to coordinates (x, y) as:

x = p mod width, y = pwidth

Where width = image width in pixels, height = image height in pixels, data = flat RGBA array (Uint8ClampedArray), L = total array length, p = pixel index, A = alpha channel value (0 - 255).

Reference Data

Image Format	MIME Type	Alpha Support	Typical Use	Canvas Readable	Compression	Max Colors
PNG	image/png	Yes (8-bit)	Sprites, UI, icons	Yes	Lossless (DEFLATE)	16.7M + alpha
JPEG	image/jpeg	No	Photos, backgrounds	Yes	Lossy (DCT)	16.7M
WebP	image/webp	Yes	Web optimization	Yes (modern browsers)	Lossy / Lossless	16.7M + alpha
BMP	image/bmp	Optional (32-bit)	Legacy systems	Yes	None / RLE	16.7M
GIF	image/gif	1-bit only	Simple animations	First frame only	Lossless (LZW)	256
AVIF	image/avif	Yes	Next-gen web	Partial (Chrome/Firefox)	Lossy / Lossless (AV1)	16.7M + alpha
ICO	image/x-icon	Yes	Favicons	Yes (as PNG inside)	None / PNG	16.7M
SVG	image/svg+xml	Yes (vector)	Scalable graphics	Via rasterization	N/A (vector)	Unlimited
TIFF	image/tiff	Yes	Print, scanning	No (not natively)	Various	16.7M
HEIC	image/heic	Yes	Apple photos	No (not natively)	Lossy (HEVC)	16.7M
Output JSON Size Estimates (full RGBA data array)
Resolution	Total Pixels	RGBA Entries	JSON Size (approx.)	transparencyList Size	Processing Time (est.)
16 × 16	256	1,024	~4 KB	256 bytes	< 1 ms
64 × 64	4,096	16,384	~64 KB	4 KB	< 5 ms
256 × 256	65,536	262,144	~1 MB	64 KB	~20 ms
512 × 512	262,144	1,048,576	~4 MB	256 KB	~80 ms
1024 × 1024	1,048,576	4,194,304	~16 MB	1 MB	~300 ms
1920 × 1080	2,073,600	8,294,400	~32 MB	2 MB	~600 ms
4000 × 3000	12,000,000	48,000,000	~190 MB	12 MB	~3 s
8000 × 6000	48,000,000	192,000,000	~760 MB	48 MB	~12 s

Frequently Asked Questions

Each pixel produces 4 RGBA values (R, G, B, A) as integers 0-255. A 1920×1080 image has 2,073,600 pixels × 4 = 8,294,400 array entries. When serialized to JSON, each number plus its comma and space delimiter averages roughly 4 bytes, yielding ~32 MB. If you only need transparency information, disable the full data array and use the transparencyList string instead, which reduces output to approximately 2 MB for the same resolution.

No. The Canvas API renders only the first frame of animated GIFs. The resulting JSON represents a single static frame. For animated sprite extraction, you would need to decode the GIF binary format separately (LZW decompression of each frame), which is beyond this tool's scope.

JPEG does not support alpha channels. When a JPEG is drawn onto a canvas, every pixel receives an alpha value of 255 (fully opaque). If you need transparency data, use PNG or WebP source files. The transparencyList for a JPEG will always be a string of all 1s.

Browser canvas implementations typically cap at 16,384 × 16,384 pixels or a total area of approximately 268 megapixels (varies by browser and available GPU memory). Chrome on desktop supports up to ~16,384 px per dimension. Mobile browsers may limit to 4,096 × 4,096. Exceeding these limits causes getImageData to return zeroed arrays or throw exceptions. The tool validates dimensions before processing.

The alpha channel is an array of integers from 0 to 255 representing graduated transparency. The transparencyList is a binary string: each character is either "1" (alpha > 0, any visible pixel) or "0" (alpha = 0, fully transparent). This lossy compression is useful for collision detection masks and hit-testing where you only care about presence vs. absence, not opacity gradients. It reduces data size by approximately 97% compared to the full RGBA array.

Yes, with caveats. The browser rasterizes the SVG at its intrinsic dimensions (or default 300×150 if no viewBox is set) before canvas extraction. You lose all vector information. External resources referenced by the SVG (fonts, linked images) may not load due to CORS restrictions, resulting in missing elements in the output. For predictable results, convert SVG to PNG at your desired resolution first.