Img#toDataURL() and Img#download() and Element#screenshot()

APIs
1

I’d like the following to be possible:

Let’s say we have reference of an Image:

var img = document.createElement('img');
img.src = "image.png";

I should be able to convert that image to DataURL:

img.toDataURL(); // returns DataURL of that image just like Canvas#toDataURL();

I should be able to download it as well, but not like:

<a download="filename">

Because the file is downloaded when that anchor tag’s click() is called either by API or user gesture.

So for <img> it should be a method: (since we wouldn’t want it to download on click)

img.download('fileName.png');

Now the screenshot() method on Elements:

Element.screenshot(); // returns an <img> element

This returns a <img> element so that I don’t have to create an <img> element and change the src, it would be done automatically, and now I can easily:

var screenShot = Element.screenshot(); // get <img>
screenShot.download('filename'); // can easily download image
document.body.appendChild(screenShot); // can easily add to DOM
2

IMO it would be better to have toBlob() instead of toDataURL() since data URLs bloat the data size. My ImageData conversion API proposal already includes a way to do this via ImageData.create(img).toBlob(), or you can use a synchronous draw to canvas then call toBlob() on the canvas.

Similarly you can already download an image by first converting it to a Blob, calling URL.createObjectURL(blob), then downloading that URL.

Screenshotting elements has been discussed before IIRC and has some privacy issues. I think the biggest problem with screenshot() returning is you need to know what to set for the src attribute. Returning a Blob, ImageData or Canvas would probably be more suitable.

3

That’s kind of the whole point, what your doing is more work.

var a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'filename.png';
a.click();

or window.open()

compare to:

img.download('filename.png');

and creating a canvas just to download a picture.

So instead of dealing with a blob, your dealing with an <img> element which will allow you to easily add to the DOM

Well you did say IMO so I’ll wait for others to respond or please add on.

4

You could easily write a helper function to do that, and even attach it to HTMLImageElement so your exact example works.

5

And you could too for your ImageData.create(img) so your point is??

6

No, you couldn’t - not asynchronously, which is the purpose of the proposal.

7

Okay and you couldn’t do what I would do asynchronously as well, because that’s all internally, so again your point??

8

I’m not sure what you mean. I don’t see any problem with downloading an image being a synchronous function.