Scrennshot of web pages

[moom]

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

 

Edited April 18, 2013 by moom

[roccitman]

Nicely done! This is something I have been needing since Awesome Screenshot pooped out a few years ago! Thank you!!

[rosenkrieger]

Awesome! Really appreciate it. Works perfectly!

[lmartins]

Really cool, it only seems a bit confused when the webpage has fixed elements.

[rosenkrieger]

Is there a way only to have ONE Screenshot saved, and not thumbnail, etc. ? 

[moom]

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 April 18, 2013 by moom

[samvlu]

Very well done! Thanks.

[AlfredUserNumber8]

Funnily enough I could have really done with this last week!

Excellent stuff, all the same.

Cheers.

Edited April 19, 2013 by Barrierfreeman

[arsenty]

Awesome!

Is it possible realize feature to send a screenshot to the clipboard?

[obstschale]

That is really awesome. thx a lot for this great workflow

[Sulcalibur]

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 July 16, 2013 by Sulcalibur

[lmartins]

This is a brilliant workflow, thanks.

[AlfredFreak]

This is awesome, thank you!

[jarhead]

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 July 19, 2013 by jarhead

[raguay.customct]

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.

[Sulcalibur]

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 August 1, 2013 by Sulcalibur

[nemrod]

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 August 2, 2013 by nemrod

[moom]

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)

[spacecadet9]

Awesome

 

Thanks for this workflow, just what I needed!

[nemrod]

 

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 ???

[koolza]

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

[crisssy101]

Hotdog!    THAT's what I needed.  Thank you MOOM.  Without this forum I'd be so lost.    

[moom]

crissy101: 

Edited May 6, 2014 by moom

[Jono]

Great workflow, thanks

 

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

[Doom]

thanks, i'll use it

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