$30 off During Our Annual Pro Sale. View Details »

Processing Exif in the client with JavaScript Web Workers

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.

Christopher Berry

October 25, 2012
Tweet

Other Decks in Programming

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