moom

Scrennshot of web pages

25 posts in this topic

Hello everybody, I create workflow to Scrennshot of web pages.

This workflow use webkit2png from Paul Hammond. Webkit2png

is a command line tool that creates screenshots 

of webpages.

 

Your screenshots you can find in your desktop.

 

We have two choice: 

 

1: Write address (without http://)

2: Grab URL address from your Cipboard

 

Download: from here

 

ukazka.jpg

Edited by moom

Share this post


Link to post

Yes, you must add -F

 

From:

ython webkit2png http://"{query}"

To:

python webkit2png -F http://"{query}"

Full help:

sage: webkit2png [options] [http://example.net/ ...]

Examples:
webkit2png http://google.com/            # screengrab google
webkit2png -W 1000 -H 1000 http://google.com/ # bigger screengrab of google
webkit2png -T http://google.com/         # just the thumbnail screengrab
webkit2png -TF http://google.com/        # just thumbnail and fullsize grab
webkit2png -o foo http://google.com/     # save images as "foo-thumb.png" etc
webkit2png -                             # screengrab urls from stdin
webkit2png -h | less                     # full documentation

Options:
  --version             show program's version number and exit
  -h, --help            show this help message and exit

  Browser Window Options:
    -W WIDTH, --width=WIDTH
                        initial (and minimum) width of browser (default: 800)
    -H HEIGHT, --height=HEIGHT
                        initial (and minimum) height of browser (default: 600)
    -z ZOOM, --zoom=ZOOM
                        zoom level of browser, equivalent to "Zoom In" and
                        "Zoom Out" in "View" menu (default: 1.0)

  Output size options:
    -F, --fullsize      only create fullsize screenshot
    -T, --thumb         only create thumbnail sreenshot
    -C, --clipped       only create clipped thumbnail screenshot
    --clipwidth=WIDTH   width of clipped thumbnail (default: 200)
    --clipheight=HEIGHT
                        height of clipped thumbnail (default: 150)
    -s SCALE, --scale=SCALE
                        scale factor for thumbnails (default: 0.25)

  Output filename options:
    -D DIR, --dir=DIR   directory to place images into
    -o NAME, --filename=NAME
                        save images as NAME-full.png,NAME-thumb.png etc
    -m, --md5           use md5 hash for filename (like del.icio.us)
    -d, --datestamp     include date in filename

  Web page functionality:
    --delay=DELAY       delay between page load finishing and screenshot
    --js=JS             JavaScript to execute when the window finishes loading
                        (example: --js='document.bgColor="red";')
    --no-images         don't load images
    --no-js             disable JavaScript support
    --transparent       render output on a transparent background (requires a
                        web page with a transparent background)
    --user-agent=USER_AGENT
                        set user agent header
Edited by moom

Share this post


Link to post

Superb workflow, thank you!!!

 

What would be the best way for this to work with grabbing screenshot for Responsive Web Pages. I tried it with duplicating the script a few times for the different widths and adding it below in the Alfred prefs so there are numerous actions.

 

Here is an example of the 320px width one:

python webkit2png -W 320 "$(pbpaste)"
ls *_320.png | grep -v icon.png | xargs -I {} mv {} ${HOME}/Documents/Screenshots/

Trouble is, LOADS of Python rockets fill up the dock and it doesn't actually work either :(

 

Any help would be great.

 

 

Thanks

Edited by Sulcalibur

Share this post


Link to post

What would be the best way for this to work with grabbing screenshot for Responsive Web Pages. I tried it with duplicating the script a few times for the different widths and adding it below in the Alfred prefs so there are numerous actions.

 

Check out this article over at Nettuts on capturing responsive web pages.

Edited by jarhead

Share this post


Link to post

Casper would work, but is very heavy to get everyone to install and not too practical for embedding in the workflow. It requires PhantomJS, which is a full headless browser. A lot of tricky code to install.

Share this post


Link to post

Check out this article over at Nettuts on capturing responsive web pages.

Thanks dude, I saw that I was hoping adding a few extra bits of code in this workflow would be more simple.

Edited by Sulcalibur

Share this post


Link to post

Well first thanks for your workflow :)
 
I would like to custom the screen capture width
 
but ...
I'm a designer, so i'm not quite good at coding
 
I've tried to edit the webkit2png to modify the default size from 800 to ex:1440
but after have it zipped and renamed .alfredworkflow then Alfred doesn't want to install it ...
 
So I've try to duplicate
 

1. python webkit2png -F -W 320 --user-agent=Apple-iPhone5C2/1001.525 "$(pbpaste)"
2. ls *_320.png | grep -v icon.png | xargs -I {} mv {} ${HOME}/Desktop/

But it doesn't work ...

 

Can somebody help me :)

 

- - - - - - - - - - - - - - - - - - - - - - - - - - 

Well I answer to myself :)

I think it's a Chrome trouble, it's impossible to resize the viewport under 400px

 no ?

Edited by nemrod

Share this post


Link to post

Hello Nemrod, change your workflow to:

python webkit2png -F --width=1440 http://"{query}"
ls *.png | grep -v icon.png | xargs -I {} mv {} ${HOME}/Desktop/

-F = Only create fullsize screenshot

--width = initial (and minimum) width of browser (default: 800)

Share this post


Link to post

 

Hello Nemrod, change your workflow to:

python webkit2png -F --width=1440 http://"{query}"
ls *.png | grep -v icon.png | xargs -I {} mv {} ${HOME}/Desktop/

-F = Only create fullsize screenshot

--width = initial (and minimum) width of browser (default: 800)

 

 

Thanks moom ...

I notice that I was talking about two different workflow ...

 

I was successful with 1440px

BUT have try to shoot a Mobile size at 320px with a user agent ???

Share this post


Link to post

Hi,

 

I've been looking for a way to directly import the fullscreen screenshot to a new note in Evernote. I have no idea how to do that.

 

Can someone show me how to do it please?

 

Thank you so much!

Alex

Share this post


Link to post

Great workflow, thanks :)

 

Is it possible to grab the current tab in Safari and get a screenshot from that?

Share this post


Link to post

thanks, i'll use it :)

but imo it would be nice to screenshot the current safari/chrome tab (easy to get with applescript)

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now