0

I was just wondering how to take a screenshot of my webpage. Lets say i have an interface around all borders, and in the middle is the frame that shows websites. How would it be possible to take a screenshot of that frame. I would not need any borders and interface included in that snap. Only the frame, how can it be accomplished?enter image description here

I have included the picture which represents the layout of a website, so no need to include the entire layout but just this segment in the frame. How to capture that frame in an image programmatically? What tools and programming language can do this for me?

2 Answers2

0

PhantomJS is a fully programmable headless browser. It is able to produce PNG, JPEG, GIF and PDF files from the web pages it opens.

Use document.querySelector(), then element.getBoundingClientRect() DOM APIs to get the rectangle containing the element you want to rasterize, then set webpage.clipRect property to it and call webpage.render() method to produce the image. See this answer for an example.

Community
  • 1
  • 1
aitap
  • 325
  • 1
  • 9
0

I do not know if you really have no limitations on the technology you wish to use, but phantomJS (headless browser) can certainly be use here. Example: How to render part of a page with PhantomJS

Community
  • 1
  • 1
yakobom
  • 2,681
  • 1
  • 25
  • 33