W3C home > Mailing lists > Public > whatwg@whatwg.org > May 2012

[whatwg] toDataURL() for image/video?

From: Ashley Gullen <ashley@scirra.com>
Date: Tue, 29 May 2012 19:41:42 +0100
Message-ID: <CAABs73g7PT0TqSq4B_PeOfzY6Yz8ZCPsm00=s1P-mVuDgPsp+g@mail.gmail.com>
To: whatwg@lists.whatwg.org
Hi,

Has toDataURL() (from canvas) been considered for ordinary image and video
elements?  Seems like it would be useful for pure javascript applications.
 Currently it can be done by creating a new canvas, getting a 2D context,
drawImage(), then canvas.toDataURL().  However adding it to images directly
would be a useful convenience method, avoid the performance overhead of a
new canvas, and probably be straightforward to define/implement.

Use cases for myimage.toDataURL():
- deep copy an image (imga.src = imgb.toDataURL())
- send an image in JSON data
- conveniently store in webstorage/other permanent storage (possibly also
for caching purposes?)
- downloading an image to disk (depending on other features like anchor's
download attribute)

These are especially useful with javascript-synthesised images.  I suppose
it would have to be disallowed for cross-domain images, else canvas' dirty
flag can be worked around by deep copying a cross-domain image.

It seems to make sense to also consider it for video, but it may be
difficult to deal with streaming or strings storing very large amounts of
data.  How about a snapshot() method that returns a new Image() with the
contents of the currently displaying frame?  This can also be worked around
by drawImage() to a temporary canvas, so exists just as a convenience
method as well.

Use cases:
- easily get a representative frame, e.g. for a thumbnail
- easily snapshot the current frame when displaying webcam feed with
getUserMedia().  e.g. var myPhoto = video.snapshot();, or some of the above
uses with video.snapshot().toDataURL().

Ashley Gullen
Scirra.com
Received on Tuesday, 29 May 2012 18:42:27 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 30 January 2013 18:48:08 GMT