brenden / node-webshot

Easy website screenshots in Node.js
2.12k stars 285 forks source link

Is it possible to set the output image size? #210

Open domingosl opened 7 years ago

domingosl commented 7 years ago

It seems there no way to specify width and height of the output image? Not the browser viewport o the portion captured.

johnvnguyen commented 7 years ago

There is a way using zoomFactor, which requires some math trickery. Unfortunately, it looks like as of currently, even that doesn't work because phantomjs is not receiving the zoomFactor property. I did some debugging at it looks like object merges are failing probably due to asynchronous execution.

There is a way though. I've tested this, and it's possible If you're willing to modify webshot directly: Go to file ../webshot/lib/webshot.phantom.js Line 140, or whichever line page.render(path, {quality: options.quality}); is on Add page.zoomFactor = options.zoomFactor; before that line of code

Now go to your webshot options. This is the math trickery part. Let's say you want to take a screenshot of a page with:

windowSize: {
 width: 1024,
 height: 768
}

and you wanted to save that half the size:

shotSize: {
 width: 512,
 height: 384
}

You would have set all windowSize fields to half, or basically the same as shotSize:

windowSize: {
 width: 1024 / 2,
 height: 768 / 2
}

and you would set zoomFactor to 0.5.

This is the basic formula:

var browser_width = 1024;
var browser_height = 768;
var output_width = 512;
var output_height = 384;

var multiplier = browser_width / output_width;

var options = {
 windowSize: {
  width: (browser_width / multiplier ),
  height: (browser_height / multiplier )
 },
 shotSize: {
  width: output_width,
  height: output_height
 },
 zoomFactor: multiplier 
}

It may be better to just use another node package or some application that can handle resizing images.