Extensions designed to enrich your browsing experience

Hey guys,

I experimented a bit with the screenshot API for my newest extension today and I figured, I'll share my code for capturing screenshots of the entire website and not only the currently visible part with all of you: …

function take_screenshot(){
  document.body.style.transformOrigin = "0% "+100*window.scrollY/(Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,window.innerHeight)-window.innerHeight)+"%";
  document.body.style.transform = "scale("+(window.innerHeight/Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,window.innerHeight))+")";


function applyScreenshot(imageData) {
  document.body.style.transformOrigin = null;
  document.body.style.transform = null;

  var canvas = document.createElement('canvas');
  canvas.width = window.innerHeight/Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,window.innerHeight)*imageData.width;
  canvas.height = imageData.height;
  canvas.style = "position:fixed; top:0px; right:0px;";

  var ctx = canvas.getContext('2d');
  ctx.putImageData(imageData, 0, 0);


Note: depending on the height of the complete website, parts at the top or bottom may be cut of.
I guess it's because of some inaccurate rounding used for the transformation. If you don't want this to happen, you can use "0% 0%" as transform-origin, but you have to save window.clientX & window.clientY first, then use scroll(0,0), take the screenshot and scroll back to the initial state. That will give you an unpleasant time penalty though.

I hope, that's helpful to you 💡


Comments on: "Taking a screenshot of the entire website using Opera’s new screenshot API" (3)

  1. It's a funny idea to zoom out a page for taking a screenshot of a whole document… But did you tried this on practice? As I can judge, the resolution of the image in this case is absolutely inappropriate. Chrome extensions and my own just scroll a page instead. No problems in this case.

  2. christoph142 said:

    Yes, I'm using it in one of my own extensions (modern scroll). I estimated that it's faster for longer documents (since you don't have to scroll and take screenshots multiple times) and the quality is OK. (I do need the picture in the same size as the page shows up in zoomed out state) 😉

  3. Originally posted by christoph142:

    I do need the picture in the same size as the page shows up in zoomed out state

    Oh, yes the image looks like the zoomed out page. If you don't need to see the original-sized page on screenshot, then everything is OK.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: