Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I set a zoom level on a headless chrome instance?

I'd like to mimic the user zooming out to 80% when viewing my webpage. Something along the lines of

`google-chrome --headless --disable-gpu --screenshot --zoom=0.8 --window-size=1920,1080 http://www.example.com/`

But the "zoom" property doesn't exist, and I can't find anything in this list that looks comparable:

https://peter.sh/experiments/chromium-command-line-switches/

This must be a fairly common thing for people to want to do, so I feel I must be missing something simple...

like image 488
Codemonkey Avatar asked Aug 29 '18 08:08

Codemonkey


People also ask

How do I lock the zoom level in Chrome?

Click the three vertical dots in the top-right corner of Chrome and then select “Settings.” Click “Advanced” and then select the “Privacy and Security” option. Scroll down and click “Site Settings.” Now, locate the “Zoom Levels” option. In this menu, you can view the custom zoom levels you've set for any given website.

How do I zoom in more than 500% in Chrome?

Use Chrome's default zoom to 500%. Now use a "pinch-to-zoom" gesture on the trackpad to zoom in an additional 500%.

How do I use Chrome headless?

To visit a website in Chrome Headless, all you have to do is add the URL after the headless flag in the command line. Again, you'll see the Canary icon jump up and disappear in the Doc. But that's all you'll see.


2 Answers

Adding back this answer that was deleted but is what I was looking for.

--force-device-scale-factor=1.5 

This will set a scale factor on the headless instance when you get the screenshot. Suppose you want a 500px by 500px image of a 1000px by 1000px web page. Then use:

google-chrome --headless --force-device-scale-factor=0.5 --window-size=1000,1000 --screenshot=out.png https://mywebsite.com
like image 78
Steve Hanov Avatar answered Oct 10 '22 19:10

Steve Hanov


You don't need to use a chrome headless feature for that - chrome will render your css as long as you have the zooming in there. This is the css I used:

@media print{
    @page { margin: 2%; size: A4 }
     body { margin: 1.6cm; zoom: .7;}
     footer {
        position: fixed;
        bottom: 1;
     }
     header {
        position: fixed;
        top: 1;
     }
  }

NOTE the zoom: .7 in the body ... to issue the following chrome headless call :

chrome --headless --disable-gpu --print-to-pdf \
    'https://qto.fi:442/qto/view/installations_doc?&bid=0&as=print-doc'

Bonus: If you want custom header and footer with some logos etc. just add the header and footer tags:

 <header><p>header</p></header>
 <footer><p>footer</p></footer>
like image 38
Yordan Georgiev Avatar answered Oct 10 '22 19:10

Yordan Georgiev