Firefox 41 can screenshot a single DOM element
hacks.mozilla.org
hacks.mozilla.org
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 :-).
Or when parts of the page dynamically reposition themselves as the page scrolls. The worst.
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.
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...
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 :(
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.
This is total speculation. I could be way off-base here.
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.
screenshot("#mydiv"), send to my server
would need some security handling, at least.
The main issues that I think are important to consider are revealing browser history (visited links) and cross-frame information (like <iframe>). Modern browsers already have protection in these areas.
We have to rely on JS based rendering into a Canvas element for http://insite-feedback.com - and I would love to improve that process with a direct API :/
Well, maybe sometime soon. What would you use the direct API access for?
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...
Chrome already supports it.
I had to use the Firebug FF extension for downloading them previously. Now it is easier.
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?
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.
Like another user said, one could wrap the HTML DOM tree into a SVG element, and then render that to an image. So from within Javascript, this could be done in a few lines of code, I suppose. I haven't tried it though.
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).
Printing a specific node is a major use-case, and for that text needs to still be as scalable fonts.
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.
It's unfair to really ding any browser for not supporting this. It's not yet properly specced ("This spec is incomplete and it is not expected that it will advance beyond draft status.").