🔮 Universal Image Data Explorer Forge

60+ Converters | Binary ⇄ Hex ⇄ Pixel ⇄ Code

Technical Documentation

Module structure, luminance formula, color-space math, hashing algorithms, revert-engine internals and a complete extension guide for the Universal Image Data Explorer Forge.

🧩 ES Modules 📐 BT.601 🔐 Web Crypto 🔁 Revert Engine 📱 Responsive

1. Overview

Universal Image Data Explorer Forge is built as a collection of small, focused ES modules. There is no build step, no bundler, no framework and no server-side component. Every file is loaded directly by the browser using native <script type="module"> and every function can be read, understood and modified by anyone who knows modern JavaScript. This documentation explains how the modules fit together, what formulas they implement, and how you can extend the tool with your own converters.

2. Module Structure

The codebase is organized into three layers — application, core and UI — plus a configuration module and an info-data module. Each file has a single clear responsibility.

js/main.js — Application Controller

Wires everything together. Initializes the menu, attaches file-input handlers, listens for the CONVERT click, calls the selected converter, updates the output console, runs the Revert engine and manages the email-unlock download gate. Also opens and closes the (i) info-modal.

js/config.js — Converter Registry

Declares the eight converter groups as an array of objects. Each group has a name, an icon class and an items array. Each item has an id and a display name. The menu builder reads this file to construct the accordion, and the image processor switches on the id to choose the right algorithm.

js/core/imageProcessor.js — Conversion Engine

Contains the ImageProcessor class. Loads an image into a canvas, extracts the pixel buffer, computes the canonical grayscale array and dispatches on the converter id to produce output. All color-space conversion helpers (RGB→HSL, RGB→HSV, RGB→CMYK, RGB→YUV, RGB→XYZ), all hashing wrappers, all art generators and all programming-language formatters live here.

js/core/reconstructor.js — Revert Engine

Contains the Reconstructor class with two static methods: parseToBytes(data, format, width, height) parses pasted text into a Uint8Array, and reconstructImage(bytes, width, height) returns a canvas containing the grayscale reconstruction.

js/ui/menuBuilder.js — Accordion Menu

Reads CONVERSION_GROUPS from config.js and generates the collapsible group menu. Attaches click handlers to each converter button and each group header. Also injects the (i) info icon next to every converter.

js/ui/logger.js — System Logs Panel

Provides a tiny Logger class that prepends timestamped entries to the log panel and trims the list to twelve entries.

js/ui/downloadManager.js — File Download Helper

Provides a DownloadManager class that builds a Blob, creates an object URL, triggers a programmatic click on a hidden anchor and revokes the URL. Handles .txt, .c, .py, .java, .js and .bin output formats.

js/infoData.js — Info-Modal Descriptions

Maps each converter id to a title and an HTML body containing the algorithm explanation and use cases. Displayed when the user clicks the (i) icon.

3. Canonical Grayscale Pipeline

Every converter derives its output from a single canonical grayscale array. The array is computed by the getGrayscaleArray() method using the ITU-R BT.601 weighted-luminance formula:

Y = 0.299 × R + 0.587 × G + 0.114 × B

R, G and B are the red, green and blue channel values of the pixel in the 0–255 range. Y is the resulting luminance, also in the 0–255 range, rounded down with Math.floor. The output is a Uint8Array of length width × height.

This canonical array guarantees reproducibility. Two users processing the same image in different browsers on different operating systems will obtain byte-identical grayscale arrays, and therefore byte-identical binary strings, hex dumps, NumPy arrays, TensorFlow tensors, CSV dumps and hash values.

4. Color-Space Conversion Formulas

RGB → HSL

Normalize: r = R/255, g = G/255, b = B/255
max = max(r,g,b);  min = min(r,g,b)
L = (max + min) / 2
if max == min: H = 0, S = 0
else:
  d = max - min
  S = L > 0.5 ? d / (2 - max - min) : d / (max + min)
  H = ...
H returned in degrees (0–360), S and L in percent (0–100)

RGB → HSV

max = max(r,g,b);  min = min(r,g,b)
V = max
S = max == 0 ? 0 : (max - min) / max
H computed as in HSL
H in degrees (0–360), S and V in percent (0–100)

RGB → CMYK

c = 1 - R/255;  m = 1 - G/255;  y = 1 - B/255
K = min(c, m, y)
if K == 1: C=M=Y=0, K=100
else:
  C = (c - K) / (1 - K)
  M = (m - K) / (1 - K)
  Y = (y - K) / (1 - K)
All channels returned in percent (0–100)

RGB → YUV (ITU-R BT.601)

Y =  0.299 R + 0.587 G + 0.114 B
U = -0.14713 R - 0.28886 G + 0.436 B + 128
V =  0.615 R - 0.51499 G - 0.10001 B + 128
U and V offset by +128 to keep values unsigned

RGB → XYZ (D65 approximation)

X = 0.4124 R + 0.3576 G + 0.1804 B
Y = 0.2127 R + 0.7152 G + 0.0722 B
Z = 0.0193 R + 0.1192 G + 0.9503 B
Returned normalized by the D65 white point (95.047, 100, 108.883)

5. Hashing Algorithms

MD5, SHA-1 and SHA-256 use the browser's native Web Crypto API. The call is simply:

const digest = await crypto.subtle.digest('SHA-256', new Uint8Array(grayArray));
return Array.from(new Uint8Array(digest)).map(b => b.toString(16).padStart(2,'0')).join('');

CRC-32 is implemented as a table-free loop using the standard IEEE 802.3 polynomial:

let crc = 0xFFFFFFFF;
for (const byte of arr) {
  crc ^= byte;
  for (let bit = 0; bit < 8; bit++) {
    crc = (crc >>> 1) ^ ((crc & 1) * 0xEDB88320);
  }
}
return (crc ^ 0xFFFFFFFF) >>> 0;

All hashes are computed over the canonical grayscale byte stream, not the original file bytes.

6. Revert Engine Internals

The Reconstructor class exposes two static methods.

parseToBytes reads the pasted text and dispatches on the selected format. For binary it strips whitespace and parses each 8-character group. For hex it splits on whitespace and parses each two-digit pair. For Base64 it calls atob(). For byte array, C array and Python bytes it extracts the numeric list with a regular expression. For JSON it calls JSON.parse(). In every case it validates that the resulting byte count matches width × height and throws a descriptive error otherwise.

reconstructImage creates an off-screen canvas, allocates an ImageData, writes the byte value into all four RGBA channels of each pixel (with alpha forced to 255) and calls ctx.putImageData(). The result is a grayscale image rendered on the canvas element below the revert textarea.

7. Browser Support and Performance

The Forge requires Canvas 2D, ES modules and either SubtleCrypto or a polyfill. Tested configurations include Chrome 90+, Firefox 88+, Safari 15+ and Edge 90+. Older browsers may still run every converter except the hash family.

Performance scales linearly with pixel count for most converters. Matrix-style outputs (RGB, RGBA, Emoji Art, SVG Trace, Canvas ImageData) grow quadratically, so large images can take several seconds to render. The 8 MB upload limit protects the browser from running out of memory.

8. Extending the Tool — Adding Your Own Converter

Adding a new converter is a three-step process. No build tools, no recompilation and no bundler required.

  1. Register the converter in js/config.js. Add an item to the appropriate group with a unique id and a display name.
  2. Implement the algorithm in js/core/imageProcessor.js. Add a case to the switch statement in the convert() method. Use the pre-computed grayArr or the raw RGBA buffer as input and return a string or an awaitable promise that resolves to a string.
  3. Add the info description in js/infoData.js. Add an entry with the same id, a title and an HTML body. The (i) icon will automatically pick it up.

Reload the page and your new converter will appear in the menu immediately. The System Logs panel will record its use, the download system will offer it in the file-format dropdown, and the menu builder will generate the info icon.

Tip: Before adding a converter, check whether an existing one already covers your format. Many common use cases (for example, per-row hex dumps or whitespace-separated matrices) can be produced by post-processing the output of an existing converter in your own project.

9. Security Notes

The Forge has no backend. It does not accept logins, does not store user accounts and does not transmit image data. The only persistent client-side data is the email list used to unlock downloads. MD5 and SHA-1 are provided for non-adversarial fingerprinting and for compatibility with legacy systems; do not use them for security-sensitive applications. SHA-256 is safe for integrity checks and digital signatures.

10. Related Pages

11. Related StartKnowledge Projects

Back to Forge How to Use FAQ