
Firefox 41 can screenshot a single DOM element - liotier
https://hacks.mozilla.org/2015/09/trainspotting-firefox-41/
======
foob
This is an awesome feature, I love how browser dev tools have been
continuously improving in recent years. Taking screenshots of DOM elements has
been something I've dedicated a lot of time to recently. Most of the
extensions available for doing this rely on taking a screenshot of the
available viewport so in order to capture larger DOM elements they need to
scroll around taking repeated screenshots (which can be kind of frustrating if
it takes a long time).

We just launched a browser extension [0] for taking screenshots of Facebook
posts and we were basically tasked with accomplishing the same thing. We
approached it by fetching all of the external resources and inlining them as
data URIs, wrapping the HTML in an SVG element, drawing the SVG to a canvas,
and finally extracting the data URI for the canvas. It works really well and
eliminates the jitter/delay associated with scrolling around to capture
multiple screenshots.

Good thing we also automate the anonymization of private information or this
announcement might have obsoleted us on Firefox :-).

[0] [http://threadshots.com](http://threadshots.com)

~~~
Touche
> I love how browser dev tools have been continuously improving in recent
> years.

Meanwhile Firefox still displays all JavaScript sources as a single list in
the debugger without any sort of folder nesting, making it unusable as a
development tool for non-tiny JavaScript apps.

~~~
VeejayRampay
And sometimes doesn't stop on debugger statements.

------
ahoge
Taking screenshots of the full page or individual elements was also possible
before via Tools -> Web Developer -> Developer Toolbar (Shift + F2)... and
then using the `screenshot --selector ...` command.

You also have access to part of this functionality via the non-standard
drawWindow method:

[https://developer.mozilla.org/en-
US/docs/Web/API/CanvasRende...](https://developer.mozilla.org/en-
US/docs/Web/API/CanvasRenderingContext2D/drawWindow)

------
gedrap
Screenshotting DOM elements is almost perfect, except for one thing. Once you
take a screenshot, a file save prompt is opened, so unless I missed something,
you can't save it in the clipboard.

Which is a shame, it would be a killer thing if you could screenshot a DOM
element, save in clipboard, and copy&paste in gmail or slack. I don't want to
keep littering my desktop (or wherever) with tons of jpgs :(

~~~
andrey-p
I save them in `/tmp` and I don't need to worry about them ever again.

------
JosephRedfern
How does this work with elements with a semi-transparent background? Will the
resulting screenshots also be semi-transparent, or will they contain portions
of the element beneath?

~~~
potch
(I work for Mozilla) It captures the page cropped to the bounding box of the
element, so any background content would also be captured. The results would
not contain transparency.

~~~
greggman
So in other words it doesn't work if the element has children that are
transformed (tested that). Still useful though

~~~
philh
And if there are non-child elements positioned to overlap with this one,
presumably they get captured too?

------
ipsin
My clipboard often has private stuff in it, unrelated to the site I'm
visiting.

I don't like the idea that clicking on a button (like "add comment" on HN)
would gives a site potential access to what's in my clipboard, _without any
indication or affirmation that that 's ok_.

It feels like something that will be exploited, if only by the curious.

~~~
qixxiq
The clipboard api only includes 'cut' and 'copy' commands. There is no way
(except via extensions) to access the clipboard.

~~~
ipsin
Thanks for the correction!

------
Rangi42
Someone in the comments says "I was doing this on a normal 1600×900 monitory
and was still having issues with the right edge being cut off a little." I
have the exact same problem on a 1600×900 ThinkPad W530, running Windows 8.1
at 100% DPI. Screenshots have their right edge missing.

~~~
jessaustin
Are they also missing the bottom edge? I ask, because I can kind of imagine a
reason for such behavior. Half-open ranges let you just paste everything back
together to get the original. I seem to recall the CSS box model just sort of
arbitrarily cuts diagonally across overlapping borders...

This is total speculation. I could be way off-base here.

~~~
Rangi42
No, just the right edge. It also ignores the page zoom setting and screenshots
the element at 100%. (User styles set by Stylish do apply, though.)

------
hackuser
Related: The Print Edit add-on for Firefox, which has been doing something
similar for over 5 years, and which I think also acts on DOM elements:

[https://addons.mozilla.org/en-US/firefox/addon/print-
edit/](https://addons.mozilla.org/en-US/firefox/addon/print-edit/)

It allows you to edit the elements in a page before printing or saving (as
PDF, JPG, etc.). You can remove them, alter them, reformat them, inspect them,
print a single element (like FF 41 will do) and do much more. It's an
amazingly sophisticated add-on that I'm underselling; I encourage you to read
the link or simply try it. It's a wonder to use and the most impressive add-on
I've seen.

------
skalkin
Clicked on it hoping that this is a new browser feature that I can access from
the web page via JavaScript... but this is just a dev tool. I hope that this
feature will eventually appear, currently taking snapshots from the client
side is a major pain point.

~~~
maaaats
<div id="mydiv"><iframe src=facebook.com...

screenshot("#mydiv"), send to my server

would need some security handling, at least.

------
sergiotapia
I thought we finally got a JS api to take a screenshot of the dom. Damn!

~~~
userbinator
That sounds like it'd be very easily abused for browser fingerprinting and
DRM-ish things (do you have font X installed? Are you using custom CSS? Any
extra things added by particular extensions?)

~~~
userbinator
Another one that comes to mind is "Are you blocking ads?", although I should
probably stop before I give them any more ideas...

~~~
oneeyedpigeon
Sites already appear to be able to detect that.

------
jdub
I wish it weren't hidden away in the inspector menu... I'd love to point non-
devs at it! Maybe a(n off by default) screenshot toolbar button that let you
point at the page / element you wanted, rather like the Command-Shift-4 window
selector in OS X.

------
spdustin
Hasn't the developer command line supported this since...well at least two
years? I've used it hundreds of times. Super handy. I guess I'm glad it's in
the UI now.

------
leeoniya
_navigator.onLine_ feels like it should not have been camelcased

~~~
spicyj
Ah, but back in the days of IE4 (when this property was introduced), "online"
wasn't a word yet.

~~~
nkozyra
I feel like I'm missing the punchline here.

~~~
spicyj
"online" is accepted as a word now, but the navigator.onLine property was
added in IE4 (released in 1997) back when "on line" was the conventional
spelling.

~~~
snogglethorpe
As far as I'm aware (from personal experience), "online" has been the common
form when talking about computers since at least the 1980s, if not before.

But maybe whoever added that particular property to IE4 wasn't familar with
common (in computer circles) usage...

Here's what google ngram says:
[https://books.google.com/ngrams/graph?content=online%2Con+li...](https://books.google.com/ngrams/graph?content=online%2Con+line&year_start=1958&year_end=2008&corpus=0&smoothing=3&share=&direct_url=t1%3B%2Conline%3B%2Cc0%3B.t1%3B%2Con%20line%3B%2Cc0)

~~~
spicyj
I stand corrected! Thank you.

------
muddi900
I am not even a webdev, but this feature makes me so giddy with joy.

------
tlrobinson
I wrote a Chrome extension to do this awhile back
[https://github.com/tlrobinson/element-
capture](https://github.com/tlrobinson/element-capture) but newer versions of
Chrome broke it at some point. I'll try to get it updated.

------
ethana
The screenshot api has been in Firefox since v4 I think. I've been using this
addon ([https://addons.mozilla.org/en-
US/firefox/addon/firecaptor/](https://addons.mozilla.org/en-
US/firefox/addon/firecaptor/)) to capture element of a page. It works like the
inspector tool when selecting an element.

------
RaSoJo
Amongst the other features - Being able to download the HAR file is quite
useful.

Chrome already supports it.

I had to use the Firebug FF extension for downloading them previously. Now it
is easier.

------
chris_engel
I was shocked for a second that the product I've been working on for the last
year [0] has become obsolete over night... But luckily its not the case, phew
:D

We are creating screenshots of websites directly in the browser to enable
users to give easy feedback to their web agencies - and we also implemented a
cropper to make this easier for the people.

Does anybody know if there are plans to offer access to the screenshot library
via a JS API somewhere soon in the future?

[0] [http://insite-feedback.com](http://insite-feedback.com)

~~~
paulirish
> Does anybody know if there are plans to offer access to the screenshot
> library via a JS API somewhere soon in the future?

It's almost certainly not going to happen, due to security concerns. There
previously had been attempts to toss a DOM screenshot into a WebGL texture but
that was also found to be vulnerable to timing attacks that could reveal
private data.

~~~
chris_engel
Well, it could ask for permission - like the Fullscreen API, or the HTML5
Notifications, or...

~~~
kevingadd
It's a hard permission to give safely, because once the application has
permission to take screenshots there are tons of ways for it to get third-
party content into the viewport and capture it.

------
unicornporn
Is this cool or what? I just uninstalled the "Screengrab!" extension I've been
using for years.

------
csrunlmfvth1
I am sad it saves raster PNG files rather than something scalable like SVG or
PDF. SVG seems like an easy win.

~~~
bzbarsky
Creating a raster image can just use the normal painting codepath, since
that's what a browser has to do anyway to get pixels up on the screen.

Encoding stuff in SVG, on the other hand, requires adding a lot more plumbing
(and some parts of it, like element() backgrounds it's not immediately clear
how you'd do without rasterizing things).

~~~
csrunlmfvth1
Perhaps I am wrong in assuming, but I thought it was effectively converting to
something like a <canvas> behind the scenes anyway, simply for
scalability/zoom purposes, in which case it just needs to have a node-focused
clipping area, even if the all other elements remain rendered outside of the
clipping area (though most could be discarded, as they are off-screen). Even
if untrue, simply substitute Postscript for SVG in my comment... Firefox can
clearly print an <html>-rooted DOM node. Even if they just had a "print DOM
node" item, the result could be passed to the normal printing path to get
something close to a .PS. Users often have Print-to-PDF software already.

Printing a specific node is a major use-case, and for that text needs to still
be as scalable fonts.

~~~
bzbarsky
Leaving the fonts scalable while rasterizing everything else would be fairy
doable, yes.

------
MattBearman
Shameless plug: If you're interested in this functionality, but want it in all
browsers without needing any plugins, check out my start up BugMuncher -
[https://www.bugmuncher.com](https://www.bugmuncher.com)

~~~
kevingadd
Fetching the current page over the network from a similar browser is not
exactly the same as taking a screenshot from the user's actual browser
instance...

~~~
MattBearman
You are correct sir, but until this new firefox screenshot function is
available as a JavaScript API in all browsers, it's the closest anyone can
get. And there will always be stragglers with older browsers to account for.

It's also worth mentioning that because BugMuncher uses a big farm of Selenium
servers, it's pretty rare that it can't take the screenshot in the exact same
Browser / OS as the user. And in those scenarios, BugMuncher uses a scoring
algorithm to find the closest match available.

------
eccstartup
This is cool though. Hope it can screenshot a pdf image.

------
sgarrity
This is s small, but awesome feature.

------
TazeTSchnitzel
That'll save me from typing ⌘+^+⇧+4 and having to manually align the box.

~~~
xj9
Isn't it just ⌘+⇧+4?

~~~
kalleboo
Adding Control puts it in the clipboard instead of a file on the desktop

~~~
TazeTSchnitzel
Yep. Then I can paste it into Imgur, the GIMP or Twitter.

~~~
rndn
I have this script bound to cmd-shift-6: [https://github.com/jomo/imgur-
screenshot](https://github.com/jomo/imgur-screenshot)

------
ycitera
next thing you know, they will say that it belong into an extension... but
Firefox is still my favorite

------
kalleboo
Wait, so Firefox _just_ added clipboard copy support one day ago, and everyone
in the other thread about clipboard.js was already calling Safari "the new IE"
for this reason?

~~~
ahoge
Safari 9 has the lowest score on HTML5test and the ES6 compat table. To make
matters worse, Safari 9 isn't even out yet.

~~~
X-Istence
Safari 9 was released yesterday (September 30) alongside OS X El Capitan.

------
jstimpfle
That's fantastic guys. I mean, think about it. Screenshot a . single . DOM .
element. Upvote this. Oh my god I think I should just get some sleep.

