Unraveling the JPEG

“Unraveling the JPEG” is a great deep dive into the JPEG image format.

This article is about how to decode a JPEG image. In other words, it’s about what it takes to convert the compressed data stored on your computer to the image that appears on the screen. It’s worth learning about not just because it’s important to understand the technology we all use everyday, but also because, as we unravel the layers of compression, we learn a bit about perception and vision, and about what details our eyes are most sensitive to.

Comes with interactive editors which allow you to adjust the JPEG data, and directly see how it affects the image.

Great stuff to play with!

Unraveling the JPEG →

Exif.js – JavaScript library for reading EXIF image metadata

exif-js

Following up on yesterdays “Read EXIF thumbnail from JPG image using JavaScript” I stumbled upon Exif.js, a library which reads EXIF meta data – and not just the thumbnail – from JPEG images.

Usage is simple:

EXIF.getData(imageElement, function() {
   alert(EXIF.pretty(this));
});

It’s also possible to get single values:

EXIF.getData(imageElement, function() {
    var make = EXIF.getTag(this, "Make"),
        model = EXIF.getTag(this, "Model");
    alert("I was taken by a " + make + " " + model);
});

Exif.js – Reading EXIF meta from JPEG images →

Read EXIF thumbnail from JPG image using JavaScript

Little demo by @codepo8 which reads the thumbnail out of the EXIF data of an image:

exifthumbnail

The code itself is very simple: it opens a FileReader and seeks for the second occurrence (*) of 0xFF 0xD8 (Start of Image) along with its following 0xFF 0xD9 (End of Image). All bytes in between are the thumbnail image.

function getThumbnail(file) {
  if (file.type === "image/jpeg") {
    var reader = new FileReader();
    reader.onload = function (e) {
      var array = new Uint8Array(e.target.result), start, end;
      for (var i = 2; i < array.length; i++) {
        if (array[i] === 0xFF) {
          if (!start) {
            if (array[i + 1] === 0xD8) {
               start = i;
            }
          } else {
            if (array[i + 1] === 0xD9) {
              end = i;
              break;
            }
          }
        }
      }
      if (start && end) {
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(new Blob([array.subarray(start, end)], {type:"image/jpeg"}));
        var imgf = new Image();
        imgf.src = imageUrl;
        document.body.appendChild(imgf);
      }
    };
    reader.readAsArrayBuffer(file.slice(0, 50000));
  }
}

(*) The second occurrence is used as all JPEG files start with 0xFF 0xD8. However, to be technically correct – as more occurrences of 0xFF 0xD8 may be present – the code should first look for 0XFF 0xE1 which denotes the start of the EXIF Segment. It is in that segment that the thumbnail can be found. See this document for more info.

Demo →
Source →