HTML5 Guidelines for Web Developers

286 Chapter 12—Finishing Touches:Some Global Attributes

For the thumbnail of the image, we use a data: URI as a src attribute, created via

the FileAPI, as discussed in Chapter 5, Canvas (see section 5.12, Base64 encod-

ing with “canvas.toDataURL()”). We first define a new FileReader object, and

then load the image asynchronously into the memory via readAsDataURL(). At the

end of the loading process, we assign the resulting data: URI to the image as a

src attribute. The relevant JavaScript code is short and clear:

var dataURLReader = new FileReader();

dataURLReader.onloadend = function() {

imgElem.src = dataURLReader.result;

imgInfo.innerHTML = file.name+' ('+_inKb(file.size)+')';

}

dataURLReader.readAsDataURL(file);

The width of the thumbnail is specified in the CSS stylesheet as width: 250px;

the height is adjusted automatically by the browser. The text below the image

reflects the FileAPI attributes file.name and file.size. The byte information in

file.size must be divided by 1024 to convert the file size to kilobytes. The auxil-

iary function _inKb() does this for us and also adds the characters KB at the end

of the calculated value.

For reading the EXIF information, the file must be in binary form. Similar to rea-

dAsDataURL(), we now use readAsBinaryString() and get our desired result in

the onload callback. This does not yet allow us to access the EXIF data, because

the data is hiding somewhere in the binary code and needs to be extracted first.

We want to thank Jacob Seidelin for his JavaScript implementation for reading

EXIF data, which made this example possible.

The version of exif.js used in this example is not the original version by Jacob

Seidelin, but instead is a slightly adapted version by Paul Rouget. You can find

both versions online in the relevant demos at these URLs:

z http://www.nihilogic.dk/labs/exif

z http://demos.hacks.mozilla.org/openweb/FileAPI

A single line is now sufficient to find the existing EXIF information as key-value

pairs via the function findEXIFinJPEG(). In a for loop, this list is then processed

and converted into table rows with the auxiliary function _asRow(), and the result

is added to the result table in the variable exifInfo:

var binaryReader = new FileReader();

binaryReader.onload = function() {

var exif = findEXIFinJPEG(binaryReader.result);

NOTE