Canvas toDataUrl()
March 4th, 2006
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?
- Javascript , Web Development
- Comments(2)
[...] script gets around this limitation by using the toDataUrl() function in canvas (supported in Firefox and Opera). toDataUrl() essentially takes the contents of [...]
[...] I think it’s fantastic that all of these effects can be achieved using <canvas>. However, it appears that the effects are achieved through the manipulation of individual pixels and unless there are dramatic improvements in performance I don’t think this would be practical as an unobtrusive Javascript. However, it could make a fantastic web-based AJAX image editor which would allow you to tweak an image before submitting it using toDataUrl(). [...]