okfn/webshot

A web service to take screenshots

Node based server for taking webshots using node-webshot. Includes heroku config.

See it and use it live at http://webshot.okfnlabs.org/

Originally forked from opsb/node-webshot-server.

Getting started

$ npm install
$ node app.js
open your browser at http://localhost:5000

Heroku

$ heroku create [name]
$ heroku config:add LD_LIBRARY_PATH=/usr/local/lib:/usr/lib:/lib:/app/vendor/phantomjs/lib
$ heroku config:add PATH=/usr/local/bin:/usr/bin:/bin:/app/vendor/phantomjs/bin
$ git push heroku master
open your browser at http://appname.herokuapps.com

Service options

Resizing

http://localhost:5000/api/generate?url=google.com&width=500
http://localhost:5000/api/generate?url=google.com&height=300
http://localhost:5000/api/generate?url=google.com&width=200&height=400
http://localhost:5000/api/generate?url=google.com&width=200&height=400&full=true

webshot's Issues

API structure

Currently we have:

/api/generate?url ..

Previously we had:

/?url=...

I think for such a simple service we may want to keep it super simple (and easy to remember) in which case the very simple option may be nice:

/?url= 

@simong @rossjones what do you think?

(idea) Option to change the user agent.

Default

userAgent: 'Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36'

Question from node noob: Why does it output 500 and "Unable to take screenshot"?

Hey there,

I am trying to get this to run as my first node app ever.
All on Ubuntu 12.04 LTS and the newest nodejs version.

Modules should be all installed, file permissions as well. I put a console.log to debug and this seems to happen:

/home/ubuntu/tmp/1131012-27438-y2zl70.png
GET /api/generate?url=http%3A%2F%2Fwww.dasauto-magazine.com&width=1024&height=768&full=false 500 18ms - 27b

directory is there and has write permissions.

Would be great if you could point me to the right direction.

Error on openspending.org

This seems to error: http://webshot.okfnlabs.org/api/generate?url=https://openspending.org/

@simong Any idea why?

flex-flow handling

I'm trying to have the following html output as an image using Webshot:
http://gregmercer.github.io/test/chess-board.html

However, it seems like I'm running into an issue with handling the row wrap.

I use the following inline css:
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
width: 500px;

I've tried testing this using the Webshot testing site:
http://webshot.okfnlabs.org/

The result is that the rows are turned into an image, but the row wrapping doesn't seem to get limited based on the 500px width. The image output is one long row, instead of the eight rows of a chess board.

Is there something I'm doing wrong? Is there something I can change about my css, or is there a specific useragent I should be setting? Or it something else?

Thanks, Greg

webshot.okfnlabs.org versus screenshot.okfnlabs.org

would screenshot be better?

Set output image size

Current width / height set frame height that we screenshot. I want to control output size ...

Support for web fonts

Does phantomjs support this?

Copy image to clipboard

Full document size screenshots

Currently the screenshots look like they are only of the "browser's" visible area, would be great if it were possible to get a full, document size screenshot.

Specify your own filename for a screenshot

Allow users to specify a short name to save their screenshot at (a bit like bit.ly but for screenshots). E.g. you could do ?filename=... and then you could get that screenshot forever at:

webshot-service/f/{filename}.png

Preserve image size ratio by default

I'd like to be able to change width and have height auto-update

Remove node_modules from the repo

We probably not have node_modules committed to the repo - we can just run npm install to setup. Suggest:

• removing node_modules (for bonus points but added complexity we could strip from repo history!)
• adding node_modules to .gitignore to avoid adding in future
• adding npm install to setup instructions

Code Not working

I am trying for below URL to get screenshot but showing 500 error.Kindly help me to resolve this issue.

https://sap-smb-recast-bot.cfapps.eu10.hana.ondemand.com/web/chart?data=eyJUaXRsZSI6IiIsIkRpbWVuc2lvbnMiOlsiQ1AxMDAxMTAiLCJDUDEwMDEzMCIsIkNTMjAwMTIzIiwiQ1AxMDAxNDAiLCJDUDEwMDEyMCJdLCJNZWFzdXJlcyI6W3siTWVhc3VyZUxhYmVsIjoiS0NORVRTQUxFUyIsIk1lYXN1cmVWYWx1ZXMiOlsiMzQ1NDI3OS42NTAwMDAiLCIyMTA4OTgxLjc1MDAwMCIsIjE5NTU1NTUuODIwMDAwIiwiMTc4Mzk5Mi43NTAwMDAiLCIxNTk3MDkzLjIwMDAwMCJdfSx7Ik1lYXN1cmVMYWJlbCI6IktDR1JPU1NQUk9GSVQiLCJNZWFzdXJlVmFsdWVzIjpbIjE5Mzk4OTEuMTMwMDAwIiwiMTE4NTE1My40MDAwMDAiLCIxNTYxMzUyLjc3MDAwMCIsIjEwMDE0NjYuODcwMDAwIiwiODk2NjA5LjYzMDAwMCJdfV19

Add debug output in response

There are quite a few quirks still left in the API and it might be beneficial to people to have some idea of why their request is failing.
This can probably be handled when we're doing the file storage.

Home page with logo and instructions

Current home page is screenshot from github. Instead have a proper homepage with:

• Logo / title
• a short intro and instructions (perhaps with a form where you can post a url and an instructions about the "api" ...)