Processing Exif in the client with JavaScript Web Workers

I talked about how we at Flickr process Exif from a user uploaded photo as well as general methods to processing Exif using JavaScript Web Workers.

Transcript

1. Using Web Workers
   for fun and profit:!
   Parsing Exif in the client!
   !
   Photo by Nick Humphries http://www.flickr.com/photos/nickhumphries/2215306696/
   
   

   View Slide

2. 3 Things!
   • What is Exif?!
   • Binary Data and Typed Array support!
   • Walking through an Exif example!
   Photo by Sandy http://www.flickr.com/photos/dacotahsgirl/299198494/
   
   

   View Slide

3. What is Exif?!
   • Exchangeable Image
   File Format!
   • Describes tags used
   in images, sounds,
   tags used in digital
   still cameras!
   Photo by max shirley http://www.flickr.com/photos/maxshirley/123499064/
   
   

   View Slide

4. Flickr`s Old and New
   Parsing Methods!
   • Old!
   • Php - ExifTool Implementation!
   • New!
   • Client-Side via JavaScript!
   Photo by kamerakamote http://www.flickr.com/photos/tzf093/5025016700/
   
   

   View Slide

5. The Exif Flow
   
   

   View Slide

6. Why Client Side?!
   •  Quicker results to the user!
   •  Asynchronously in a separate thread from the UI via web workers!
   •  Considerations!
   Photo by texaus1 http://www.flickr.com/photos/texaus1/6339147317/
   
   

   View Slide

7. Slicing Blobs!
   !!
   !binaryReader = new FileReader();!
   !
   !binaryReader.onload = function (e) {!
   !
   ! !var result = binaryReader.result;!
   !
   ! !worker.postMessage({!
   ! ! !guid: guid,!
   ! ! !arrayBuffer: result!
   ! !});!
   !
   !};!
   !
   !binaryReader.readAsArrayBuffer(filePart);!
   

   View Slide

8. Typed Array Support!
   • Oh, thank god, Typed Arrays!!
   • DataView!
   !
   !this.getUint8 = function(offset) {!
   ! !if (compatibility.ArrayBuffer) {!
   ! ! !return new Uint8Array(this.buffer, offset, 1)[0];!
   ! !}!
   ! !else {!
   ! ! !return this.data.charCodeAt(offset) & 0xff;!
   ! !}!
   !}!
   
   
   //Returns a ULONG integer!
   !
   !var b3 = this.getUint8(this.endianness(offset, 0, 4, littleEndian)),!
   ! b2 = this.getUint8(this.endianness(offset, 1, 4, littleEndian)),!
   ! b1 = this.getUint8(this.endianness(offset, 2, 4, littleEndian)),!
   ! b0 = this.getUint8(this.endianness(offset, 3, 4, littleEndian));!
   !
   !return (b3 * Math.pow(2, 24)) + (b2 << 16) + (b1 << 8) + b0;!
   !
   

   View Slide

9. Binary Data!
   Exif Data
   Type (UINT)
   Defined as
   1 BYTE An 8-bit unsigned integer
   2 ASCII An 8-bit byte containing one 7-bit ASCII code. The final byte is
   terminated with NULL.
   3 SHORT A 16-bit (2-byte) unsigned integer
   4 LONG A 32-bit (4-byte) unsigned integer
   5 RATIONAL Two LONGs. The first LONG is the numerator and the second
   LONG expresses the denominator.
   7 UNDEFINED An 8-bit byte that can take any value depending on the field
   definition
   9 SLONG A 32-bit (4-byte) signed integer (2`s complement notation)
   10 SRATIONAL Two SLONGs. The first SLONG is the numerator and the second
   SLONG is the denominator
   

   View Slide

10. Exif Specifications!
    • Specifications!
    • Exif!
    • IPTC/XMP!
    • JFIF!
    Photo by Gary Jungling http://www.flickr.com/photos/jugbo/366748612/
    
    

    View Slide

11. Thank You!
    Flickr Code Blog:
    http://tinyurl.com/flickrcodeexif
    Exif Specification Breakdown:
    http://tinyurl.com/exifspec
    

    View Slide