HTML and CSS Reference
In-Depth Information
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.
Note
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.
Note
