HTML and CSS Reference
As you can see from the code, the user is asked to drag-and-drop an image onto the ad's canvas element, where
the DND API and the File API render the image to the screen. From there, we'll call a method, beginCanvasDrawing ,
that will call up our specific canvas drawing functions allowing the user to “draw” once the user has inserted an image
into the browser.
Inside beginCanvasDrawing , we'll detect whether a user is drawing with the mouse and present a button for the
user to save the new image composition. Once the user selects the button, a new image is created, and the canvas 's
new bitmap information is applied to the image's source. From there the image is saved to their file system by using
a replace on the image's file type to image/octet-stream , which allows the user to save the image information as a
binary file. Figure 6-3 shows what the browser should render.
Figure 6-3. The image file upload example with File and canvas
■ You can detect whether the browser supports the File Writer apI and save information locally that way.
Otherwise you can use server-side code to take the binary information and save the asset by its proper file name.
In addition, HTML5 is set to support a download attribute to <a> elements. This approach signifies that
the browser should locally download the URL it points to rather than navigate to the URL. (See http://html5-
demos.appspot.com/static/a.download.html for an example of this. Also, look at http://nihilogic.dk/labs/
canvas2image ; it's a useful and lightweight library that can save different image types from the canvas element.)
I myself still remember how excited I got when Flash Player 10 let ad developers gain file access to create user-
generated content (with user permission). Now, within the browser natively, we can do the same thing—grab local
files, access video or audio from the user's machine. It's all pretty amazing stuff if you ask me!
■ Keep in mind that this apI, which is not actually a part of the hTML5 specification, is in a working-draft state.
Thus, features may be altered or changed as work on the specification continues. see www.w3.org/TR/FileAPI for more
information on the File apI.