Jump to content

Scrennshot of web pages


Recommended Posts

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
Link to comment

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
Link to comment
  • 2 months later...

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
Link to comment

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
Link to comment
  • 2 weeks later...

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
Link to comment

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)
Link to comment

 

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

Link to comment
  • 2 weeks later...
  • 8 months later...

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
×
×
  • Create New...