Parsing and Stripping EXIF Metadata Completely In-Browser with JavaScript ArrayBuffers
Every smartphone photo you take embeds precise metadata inside the file: GPS latitude and longitude, camera serial numbers, lens focal lengths, and timestamps. When users look for an online tool to check or clean this data before sharing an image, 95% of web utilities ask them to upload their private photo to an external backend server. From a privacy standpoint, uploading a sensitive photo to a…
Smartphone photos embed GPS metadata, camera specs, and timestamps in their files. However, most online tools requiring users to upload photos to a remote server to scrub this data is a privacy concern. A common frontend approach—loading an image onto an HTML5 canvas and calling canvas.toBlob( image/jpeg )—also alters the image quality via compression.
To address this, ScanMetadata was engineered to run entirely in the browser's memory using ArrayBuffer and DataView. This method parses and strips EXIF data losslessly without altering the image quality.
A JPEG file is composed of sequential binary blocks known as segments, each starting with a two-byte marker (0xFF followed by a marker code). The Start of Image (SOI) marker (0xFFD8) marks the beginning, while the End of Image (EOI) marker (0xFFD9) marks the end. Between these markers, the APP1 segment holds EXIF metadata, including camera settings and GPS coordinates.
The APP0 segment contains the standard JFIF header, while the DQT and SOF markers represent quantization tables and frame headers, respectively. The SOS marker (0xFFDA) signals the beginning of the actual compressed image payload.
To safely inspect metadata without loading the entire file, the File API, FileReader, or file.arrayBuffer() slice can read a portion of the file into a DataView. The function locateExifSegment reads the first 128KB of the file to locate headers quickly. It then validates the SOI marker (0xFFD8) to ensure the file is a valid JPEG.
The function then iterates through the segments, checking for the APP1 marker (0xFFE1), which indicates the presence of EXIF data. Once found, it retrieves the segment length and returns the start offset and total length of the EXIF segment.
Once the EXIF segment is located, the TIFF header is parsed to determine the file's endianness (Little-Endian or Big-Endian). The TIFF header's first two bytes indicate the byte alignment. The function uses DataView to read the endian tag and checks if it matches the Intel (0x4949) or Motorola (0x4D4D) formats. The correct endianness is crucial for accurately interpreting the tag pointers and GPS coordinates. If the TIFF header format is invalid, an error is thrown.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
