brenden / node-webshot Goto Github PK
View Code? Open in Web Editor NEWEasy website screenshots in Node.js
Easy website screenshots in Node.js
Example - https://github.com/madhums/node-imager
Create options "thumbnail" and "thumbnailCrop" with params width, height and crop(true/false) for resize and/or crop image.
I just got caught out.
Node 0.10.2 gives error "Error: spawn ENOENT" when running the tests and imagemagick isn't installed on your system. Of course this is a little cryptic. It wasn't until I downgraded to 0.8.15 and got a different error message did I know what was going on.
FYI the error message in 0.8.15 was "Error: Command failed: execvp(): No such file or directory".
Firstly - Thanks for contributing this library. I'm having an odd issue though - exclusive to one rather large bit of HTML5 markup.
If I pass this in as an HTML string w/ siteType: 'html' - it dies. If I use a URL to the same content - no issue.
source: http://projects.postclick.net/~jbair/phantom-test.html
Node.js 10.5
└─┬ [email protected]
└─┬ [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
└─┬ [email protected]
└── [email protected]
Hi!
node-webshot is great tool!
I have simple question: how to use addCookie function (PhantomJS). I tried to implement it with node-webshot but without success. In my case I have to set cookie before screenshot.
Thanks for any help!
M.
In the documentation, this is declared:
var webshot = require('webshot');
var fs = require('fs');
webshot('google.com', function(err, renderStream) {
var file = fs.createWriteStream('google.png', {encoding: 'binary'});
renderStream.on('data', function(data) {
file.write(data.toString('binary'), 'binary');
});
});
The stream instance is returned asynchronously. Why is this? Should the code not look like this?
var webshot = require('webshot');
var fs = require('fs');
var file = fs.createWriteStream('google.png', {encoding: 'binary'});
var renderStream = webshot('google.com');
renderStream.pipe(file);
It is really a great API. I tested images and pdfs output and all work. but just one small issue, generated images are always correct but pdf always has blank white area on the bottom and it occupy half or one page. I tried option to resize but it doesn't fix it. Thank you.
Hey im trying to return a base64 image but im finding it hard, when i write the file to disk its fine. when i return base64 it returns half an image.
var options = {
screenSize: {
width: 1280
, height: 768
}
, streamType: 'png'
, shotSize: {
width: 1280
, height: 768
}
}
webshot(url, options,function(err, renderStream) {
renderStream.on('data', function(data) {
res.send(data.toString('binary'));
});
});
returns a valid base64 just a tiny portion of the screen. Really weird.
any ideas?
Is it possible to pass variables to the options.script method? I'm pretty sure it's not because it's using eval()
, but it would be a nice feature.
var a = 'Title';
var b = 'Subtitle';
var opts = {
script: function(){
var div = document.createElement('DIV');
div.innerHTML = '<h1>'+ a +'</h1><h2>' + b + '</h2>';
}
}
Hi,
I'd like to take a screenshot of a site's current state, then inject some js, and take another screenshot.
Is that possible with node-webshot?
I could do two calls to webshot, but that would also mean two requests (?), in which case the page might not look the same (different ads etc.).
We managed to work around this by commenting out the width/height options in the clipRect part of the phantom script.
timeout option does not work, as there is a check for 'path' variable.
I think it should still be possible to kill the process if nothing has been written to the pipe within a timeout period.
I'll take a look at making a merge request when I get time, for now I just hacked around it in my own code, badly.
Great project though, +1
Would be great if we had an option to add the customHeaders
that PhantomJS has but inside Webshot.
Ideally it would sit in the options in a similar fashion to cookies
.
Thanks
Hello, I've tried with no success to get webshot to work on Heroku. Oddly, it works fine locally and when running foreman start
(which should emulate Heroku.) Here are some more details:
I've used a few variations of your examples and code I've found online. I can post code samples here if needed, but maybe you have more insight into Heroku?
I've seen mention online to a custom buildpack, is this needed?
Thanks,
-Matt
var webshot = require('webshot');
var fs = require('fs');
webshot('google.com', function(err, renderStream) {
var file = fs.createWriteStream('google.png', {encoding: 'binary'});
renderStream.on('data', function(data) {
file.write(data.toString('binary'), 'binary');
});
});
error:
events.js:77
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at exports._errnoException (util.js:676:11)
at Process.ChildProcess._handle.onexit (child_process.js:772:32)
I'm open for suggestions or collaboration:
https://npmjs.org/package/grunt-webshot
Thanks for the webshot module 👍
We managed to work around this by commenting out the width/height options in the clipRect part of the phantom script.
Hi, the API works perfectly. but i'm missing a feature that phantomjs uses normally, its css' @media.
I'm willing to print invoices and i've defined special css styles, but when I use webshot it prints the browser view.
Is there a way of doing it?
Thank you!
webshot is not working with any site build in https://github.com/facebook/react/
Simple html test page if you want to try:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
If I use the following JS and call directly using phatomJS
var webPage = require('webpage');
var page = webPage.create();
phantom.addCookie({
"name": "test",
"value": "no value",
"domain": "localhost"
});
page.open('http://localhost/web/status.html', function() {
page.render('test.png');
phantom.exit();
});
Then have a local web server that changes the web/status.html page to simply show the contents of document.cookie my screen shot will show my test cookie.
If however instead I use webshot to handle the cross process comunication from inside my node app I can't set the cookie (the screen shot always shows a value of '""' for document.cookie).
node file (test.js) is as such
var options = {
defaultWhiteBackground: true,
cookies = [{
"name": "test",
"value": "no value",
"domain": "localhost"
}]
};
webshot('http://localhost/web/status.html','test.png', options, function(err) {
// screenshot now saved to outFile iff err==null
});
The documentation implies the cookies object gets passed to phantomJS and to use an array. I tried without the array. i tried with "cookie" instead of "cookies" I've tried several different formats and can't seem to get it to work. I even tried using the custom headers, and while logs of the webserver did in fact show that the request object to the servr contained the cookie header it didn't populate the document.cookie int he phantomJS render.
Am I doing something wrong? Or are cookies not fully supporter by webshot?
It can't generate image if I pass a specify url "http://max.oos.tw/?p=179" but it generate image successfully when I use PhantomJS command line tool.
I use webshot to implement a web service. I got a bad file when I want to generate image using url "http://max.oos.tw/?p=179"
As soon as I'm passing a real UA string containing (
and )
to webshot's options webshot will fail.
My options look like:
{
screenSize: {
width: 320
, height: 480
}
, shotSize: {
width: 320
, height: 'all'
}
, userAgent: 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'
}
The error message I am seeing is the following:
c:\Users\me\my-project> "c:\Users\me\AppData\Roaming\npm\\node.exe" "c:\Users\me\AppData\Roaming\npm\\node_modules\phantomjs\bin\phantomjs" c:\Users\me\my-project\node_modules\webshot\lib/webshotphantom.js http://my.url.com c:\Users\me\my-project/screencaptures/2014-07-29/my-target-file.jpg false "{\"windowSize\":{\"width\":320,\"height\":480},\"shotSize\":{\"width\":320,\"height\":\"all\",\"shotOffset\":{\"left\":0,\"right\":0,\"top\":0,\"bottom\":0},\"streamType\":\"png\",\"siteType\":\"url\",\"quality\":75,\"settings\":{\"userAgent\":\"Mozilla5.0 (iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit531.21.20 (KHTML, like Gecko) Mobile7B298g\"}}"
When I omit the userAgent
option it will work like a charm. Even stranger: When I remove the parens from the passed string like:
Mozilla/5.0 iPhone; U; CPU iPhone OS 3_2 like Mac OS X; en-us AppleWebKit/531.21.20 KHTML, like Gecko Mobile/7B298g
it will work too.
My setup:
Windows 8
Node 0.10.22
PhantomJS 1.9.7
Webshot 0.15.0
I have this code
webshot url, (err, stream) ->
gm(stream, filename + extension).write directory + filename + extension, (err) ->
if err
console.log 'err:', err
else
console.log 'success'
It's works!, but with some url, just not render de image,
The url for test: https://medium.com/@moon_beamed/on-going-viral-62a3e71ddac4
i'm get
{ [Error: Command failed: gm convert: Improper image header (/var/folders/qp/g6h_g57n7m51l2qb_np957kh0000gn/T/gmfXs0zO).] code: 1, signal: null }
if i don't use gm
webshot url, directory + filename + extension, (err) ->
if !err
console.log 'saved'
else
console.log 'err:', err
i get
err: [Error: PhantomJS exited with return value 1]
I'm running webshot to capture a screenshot of our application on a cronjob. Then I transform it with ImageMagick. The issue is I have set the renderDelay up to 10000 and my app is still not fully loaded. Is there a way to wait for all http requests to finish?
var options = {
windowSize: {
width: 1100,
height: 800
},
shotSize: {
width: 'window',
height: 'window'
},
renderDelay: 0,
userAgent: 'Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36'
};
Can webshot be extended to include taking snapshots in landscape orientation, This is not an issue but a nice to have feature.
My config contains this:
phantomConfig: {
'ignore-ssl-errors': 'true'
},
When I run node path/to/node/ThumbnailWorker.js
, this error is thrown:
events.js:72
throw er; // Unhandled 'error' event
^
Error: spawn ENOENT
at errnoException (child_process.js:1001:11)
at Process.ChildProcess._handle.onexit (child_process.js:792:34)
The command that Webshot is trying to run through child_process.spawn
is this:
/home/our-user/project/node_modules/phantomjs/lib/phantom/bin/phantomjs "--ignore-ssl-errors=true" "/home/our-user/project/node_modules/webshot/lib/webshot.phantom.js" "https://api.our-website.com/preview-for-gearman-screenshoter/xxxxx" "null" "true" "{\"windowSize\":{\"width\":1200,\"height\":1550},\"shotSize\":{\"width\":\"window\",\"height\":\"window\"},\"shotOffset\":{\"left\":0,\"right\":0,\"top\":0,\"bottom\":0},\"defaultWhiteBackground\":true,\"streamType\":\"png\",\"siteType\":\"url\",\"quality\":75,\"errorIfStatusIsNot200\":true,\"settings\":{\"resourceTimeout\":5000}}"
That command ran manually in the terminal correctly prints out the image data.
I've tried changing Webshot to use child_process.exec
, running as sudo, and lots of other things, but I can't get this to run. :( It runs fine without phantomConfig
.
Any ideas?
I posted a stackoverflow question here. http://stackoverflow.com/questions/21490649/snapshot-html-pages-then-convert-to-image-using-node-js-and-phantom
test: http://www.microsoft.com
It should be 1.0
instead of undefined
. Forgot to update that. Oops.
When using the value "file" for the "fileType" parameter, the generated screenshot does not include the images contained in the HTML file (I've tried with local image files and hosted images but none worked).
However, the same HTML works fine when it's hosted.
Hi, I have an error and believe that "this" reference is incorrect in stream mode this.kill(); Having the following error when webshot is failing in stream mode due to PhantomJS crash:
TypeError: Object # has no method 'kill'
phantomProc.stderr.on('data', function(data) { clearTimeout(timeoutID); cb(new Error(data)); this.kill(); }); phantomProc.on('exit', function() { s.emit('end'); this.kill(); });
Is windows supposed to be supported ?
I have a sample code that works on Linux, but not on windows.
I even tried to path.resolve the file path, still not working.
No error message is in the console. The callback never gets called.
hello, i have an internal website which runs on port X, and when you include the :port in the link it fails to create the file,
webshot('http://XXXX:9876', 'control.png', function(err) {
// screenshot now saved to control.png
});
if i use the address without the port number it works fine.
Thank you
Regards
For some reason I haven't been able to generate a pdf while streaming the output.
These are the options I'm using:
var options = {
streamType: 'png',
paperSize: {
format: 'A4'
, orientation: 'portrait'
}
};
and this is the code I use to stream the result using express
res.setHeader("content-type", "application/pdf");
webshot(req.body.url, options, function(err, renderStream) {
if (err) {
console.log(err);
return res.end();
}
// console.log(renderStream);
// renderStream.pipe(res);
renderStream.on('data', function(data) {
res.write(data.toString('binary'), 'binary');
// console.log('something');
});
renderStream.on('end', function() {
console.log('Ready with streaming');
res.end();
});
});
The pdf is being rendered fine if the result is written to a file directly by webshot.
Thanks for the great work put into this,
I need to be able to allow my users to implicitly (By pressing a button on client-side) to take a screenshot of the page they are working with. This screenshot is to be sent as a png to the server-side and stored in database.
Is this something that I can be achieved with this module? would you please guide me as how I can capture users page on client-side?
Thanks
Amir
I get this scary error then using long html strings:
Fatal error: spawn ENAMETOOLONG�
Error: spawn ENAMETOOLONG
at errnoException (child_process.js:980:11)
at Process.ChildProcess._handle.onexit (child_process.js:771:34)� Use --force to continue.
Aborted due to warnings.
Try with http://contraponto.com.pt
Feature request:
Say I want to shot a portion of the page.
top: 50px, left:50px, width: all - 70px, height: all - 90px
shotSize: {
width: 'all',
height: 'all',
topOffset: 50,
leftOffset: 50,
widthOffset: -70,
heightOffset: -90
}
Hi !
Am I the only one who have a error with webshot ?
Here the stacktrace with node v0.10.24 :
TypeError: Bad argument
at ChildProcess.spawn (child_process.js:915:24)
at Object.exports.spawn (child_process.js:715:9)
at spawnPhantom (/project/node_modules/webshot/lib/webshot.js:215:34)
at spawn (/project/node_modules/webshot/lib/webshot.js:123:7)
at /project/node_modules/webshot/lib/webshot.js:135:9
at Object.cb as oncomplete
Thx in advance for any help !
It would be nice to support Phantom zoomFactor.
Hey there!
Proxy support seems to be missing from the library. Do you plan on adding it?
It would be interesting for cache proxies and the likes, to avoid overusing bandwidth when doing multiple page screenshots.
Thanks!
Hi,
Question;
I am not very familiar with node yet. Could you please provide me with an example of how to direct the output to an image that is send to the browser and not stored on disk/server?
Thanks in advance!
I'd like a more straightforward way of passing webshot the session credentials, for example, I want to take a screenshot of a working document on save. Right now I just get a login screen.
Perhaps a working example of how to pass phantom the info.
Would be nice if the phantomjs instance could read html from a local file.
Either directly or by first using the file api and then handle similar to the existing html string option (if needed for security).
I hacked something for this in my grunt wrapper (it transforms it into siteType:html) but then I get #39 on large files.
I know this is a phantomjs question but this project seems a good place to ask. Has anyone run flash with webshot, specifically non-video movies?
the documentation states that for a streaming context two parameters have to be submitted:
webshot('google.com', function(err, renderStream) {
//do something with the renderstream
});
when doing this only an empty file is created. (therefore the unittest for streaming isn't helping as it is only tested if the file exists but not if there's actual filecontent)
the responsible part of the code (https://github.com/brenden/node-webshot/blob/master/lib/webshot.js#L51):
the first argument is the url of the site, the last (and thus second) is the callback.
var args = Array.prototype.slice.call(arguments, 0);
var cb = args.pop();
var site = args.shift();
....
var streaming = false;
switch (args.length) {
case 1:
var arg = args.pop();
if (toString.call(arg) === '[object String]') {
path = arg;
} else {
options = arg;
streaming = true;
}
...
that results of course in streaming
getting never set to true as args
has the length of 0.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.