Canvas toDataUrl()

The WHATWG Web Applications draft which defines the <canvas> element defines a toDataURL() method.

The spec reads:

The toDataURL() method must, when called with no arguments, return a data: URI containing a representation of the image as a PNG file. [PNG].

The toDataURL(type) method (when called with one or more arguments) must return a data: URI containing a representation of the image in the format given by type. The possible values are MIME types with no parameters, for example image/png, image/jpeg, or even maybe image/svg+xml if the implementation actually keeps enough information to reliably render an SVG image from the canvas.

This sounds like an uber cool feature. It already works in Opera but is untested and it now works in the latest Firefox builds.

The data: URL returned by toDataUrl() can then be stuck into a textarea and submitted or submitted to the server using XmlHttpRequest (lots of 2.0 goodness)

Possible Uses

  • A canvas image editor – you will actually be able to save the images you've created.
  • If you want to make some changes to an image on the server but you don't have GD, perhaps you could use the user's browser and canvas to do it.
  • Graphical passwords using canvas? 

2 thoughts on “Canvas toDataUrl()

Leave a Reply

Your email address will not be published. Required fields are marked *