Exif.js – JavaScript library for reading EXIF image metadata


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() {

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:


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;
      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;
    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 →