Jump to content


Photo

Scrennshot of web pages

screenshot webkit2png

  • Please log in to reply
24 replies to this topic

#1 moom

moom

    Newbie

  • Member
  • Pip
  • 12 posts

Posted 18 April 2013 - 07:43 AM

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, 18 April 2013 - 08:49 AM.

  • Jono, rosenkrieger, ApeWare and 4 others like this

#2 roccitman

roccitman

    Member

  • Member
  • PipPip
  • 38 posts

Posted 18 April 2013 - 08:27 AM

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



#3 rosenkrieger

rosenkrieger

    Member

  • Member
  • PipPip
  • 23 posts

Posted 18 April 2013 - 08:37 AM

Awesome! Really appreciate it. Works perfectly!



#4 lmartins

lmartins

    Member

  • Member
  • PipPip
  • 89 posts

Posted 18 April 2013 - 10:57 AM

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



#5 rosenkrieger

rosenkrieger

    Member

  • Member
  • PipPip
  • 23 posts

Posted 18 April 2013 - 12:51 PM

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



#6 moom

moom

    Newbie

  • Member
  • Pip
  • 12 posts

Posted 18 April 2013 - 03:03 PM

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, 18 April 2013 - 03:03 PM.


#7 samvlu

samvlu

    Member

  • Member
  • PipPip
  • 33 posts

Posted 18 April 2013 - 10:13 PM

Very well done! Thanks.



#8 Barrierfreeman

Barrierfreeman

    Newbie

  • Member
  • Pip
  • 9 posts

Posted 19 April 2013 - 07:15 AM

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

Excellent stuff, all the same.

Cheers.

Edited by Barrierfreeman, 19 April 2013 - 07:16 AM.


#9 arsenty

arsenty

    Newbie

  • Member
  • Pip
  • 2 posts

Posted 21 April 2013 - 02:40 PM

Awesome!

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



#10 obstschale

obstschale

    Newbie

  • Member
  • Pip
  • 18 posts
  • LocationGermany

Posted 22 April 2013 - 01:14 AM

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


My Workflows: NSC (Number System Converter)

Follow Me: BlogGitHub


#11 Sulcalibur

Sulcalibur

    Newbie

  • Member
  • Pip
  • 2 posts

Posted 16 July 2013 - 01:26 PM

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, 16 July 2013 - 01:48 PM.


#12 lmartins

lmartins

    Member

  • Member
  • PipPip
  • 89 posts

Posted 16 July 2013 - 07:32 PM

This is a brilliant workflow, thanks.



#13 EngelbertHumperdinck

EngelbertHumperdinck

    Newbie

  • Member
  • Pip
  • 14 posts

Posted 17 July 2013 - 02:23 PM

This is awesome, thank you!



#14 jarhead

jarhead

    Member

  • Member
  • PipPip
  • 45 posts
  • LocationNashville, TN

Posted 19 July 2013 - 12:47 PM

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, 19 July 2013 - 12:47 PM.


#15 raguay.customct

raguay.customct

    Advanced Member

  • Member
  • PipPipPip
  • 353 posts
  • LocationTak, Thailand

Posted 19 July 2013 - 03:52 PM

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.



#16 Sulcalibur

Sulcalibur

    Newbie

  • Member
  • Pip
  • 2 posts

Posted 01 August 2013 - 12:46 PM

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, 01 August 2013 - 12:46 PM.


#17 nemrod

nemrod

    Newbie

  • Member
  • Pip
  • 16 posts

Posted 02 August 2013 - 12:32 PM

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, 02 August 2013 - 12:46 PM.


#18 moom

moom

    Newbie

  • Member
  • Pip
  • 12 posts

Posted 02 August 2013 - 12:59 PM

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)


#19 spacecadet9

spacecadet9

    Member

  • Member
  • PipPip
  • 51 posts

Posted 02 August 2013 - 01:38 PM

Awesome

 

Thanks for this workflow, just what I needed!



#20 nemrod

nemrod

    Newbie

  • Member
  • Pip
  • 16 posts

Posted 02 August 2013 - 02:12 PM

 

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





Also tagged with one or more of these keywords: screenshot, webkit2png

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users