0

I'm wondering, if there's a way to take a screenshot of any DOM-Element in javascript and save the screenshot image to a file. (for example for testing purpose ...; yeah I know I could use Selendroid, QF-Test, Sikuli, Sandstorm, and lot's of other, but I want to know how to do it in pure javascript)

I know, that I can take a screenshot from a canvas element: <canvas /> and print screen/screenshot and even take a complete screenshot of the site: Take screenshot of the whole webpage (and based on this there should be the possibility take a screenshot for a single/multiple component(s) only)

However, does anyone know how to save such an Element using the file api from HTML5 (to a location the user may select)?

Community
  • 1
  • 1
quant
  • 2,184
  • 2
  • 19
  • 29

1 Answers1

1

Javascript does not have access to things at the pixel level in the browser rendering engine.

I think your only shot would be a tool like HTML 2 Canvas which implements a whole browser rendering engine in pure javascript. You can then save the image in the canvas element.

HTML 2 Canvas

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

(Note the part where it says it may not be 100% accurate, rendering webpages is pretty complicated)

In fact the answer you linked to is only relevant here because it links through to an article that mentions HTML 2 Canvas for just this purpose, taking screenshots to stream for screensharing.

Alex Wayne
  • 178,991
  • 47
  • 309
  • 337