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/
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/
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/
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/
5. The Exif Flow
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/
7. Slicing Blobs! !! !binaryReader = new FileReader();! ! !binaryReader.onload = function (e) {! ! ! !var result = binaryReader.result;! ! ! !worker.postMessage({! ! ! !guid: guid,! ! ! !arrayBuffer: result! ! !});! ! !};! ! !binaryReader.readAsArrayBuffer(filePart);!
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;! !
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
10. Exif Specifications! • Specifications! • Exif! • IPTC/XMP! • JFIF! Photo by Gary Jungling http://www.flickr.com/photos/jugbo/366748612/
11. Thank You! Flickr Code Blog: http://tinyurl.com/flickrcodeexif Exif Specification Breakdown: http://tinyurl.com/exifspec