[whatwg] HTMLCanvasElement.toFile()

Jonas Sicking jonas at sicking.cc
Thu Jan 7 11:41:59 PST 2010

Hi web fans,

So at mozilla we've been implementing and playing around with various
File APIs lately. One of the most common use cases today for file
manipulation is photo uploaders. For example to sites like flickr,
facebook, twitpic and icanhascheezburger. Some of these sites allow
additional modifications of the uploaded image, most commonly cropping
and rotating the image. But even things like manipulating colors,
adding text, and red eye reduction are things that sites do, or would
like to do.

We do already have a great tool for image manipulation in HTML, the
canvas element. However if a site wants to upload the resulting image,
after the modifications, things become more painful. Currently you
have to call toDataURL(), send that URL using XMLHttpRequest, and then
serverside convert to binary data. Things will be a little better once
XHR supports sending manually constructed binary data, but you still
have to manually convert the data url to binary data in javascript.

I suggest we add a function like:

File toFile(in DOMString name, in optional DOMString type, in any... args);

This function takes the same arguments as toDataURL(), plus an
additional 'name' argument. It produces the same result as
toDataURL(), except that it returns the result as a File object rather
than as a data-url encoded string. This can then be directly sent
using XMLHttpRequest.

/ Jonas

More information about the whatwg mailing list