Server‑Side Browser Screenshot with Selenium and html2canvas on Linux

Server‑side browser screenshot combines Selenium and html2canvas to generate images of any webpage region in a headless Chrome environment.

Environment preparation : Install ChromeDriver from the official site, ensure Chinese fonts are present to avoid garbled text, and install Selenium via pip install selenium . Access html2canvas documentation at https://html2canvas.hertzen.com/ for usage details.

Run method :

Initialization : Launch Chrome with headless options, load the target page, and wait briefly. import time from selenium import webdriver chrome_options = webdriver.ChromeOptions() chrome_options.add_argument('--headless') chrome_options.add_argument('--no-sandbox') chrome_options.add_argument('--disable-dev-shm-usage') driver = webdriver.Chrome(chrome_options=chrome_options) driver.get("https://github.com/trending") time.sleep(1)

Inject script : Dynamically add html2canvas script to the page and execute it to capture a DOM element. html2canvas = """var s=window.document.createElement('script'); s.src='https://html2canvas.hertzen.com/dist/html2canvas.min.js'; window.document.head.appendChild(s);""" driver.execute_script(html2canvas) time.sleep(1) buildImage = """html2canvas(document.querySelector('#side_nav')).then(canvas => { data = canvas.toDataURL('image/jpeg', 0.98); var input = document.createElement('input'); input.setAttribute('type', 'text'); input.setAttribute('id', 'html2canvas_data'); input.setAttribute('value', data); document.body.appendChild(input) }); return data;""" driver.execute_script(buildImage) time.sleep(1)

Image generation : Retrieve the base64 image data from the injected input element and decode it, removing the leading data:image/jpeg;base64, prefix before conversion.

Notes :

Insert delays after each JavaScript execution or use Selenium's explicit waits (WebDriverWait) to ensure elements are ready.

If the target site enforces CSP or cross‑origin restrictions, you may need to bypass or host html2canvas locally.

Consider pre‑downloading html2canvas.js to the internal network for faster loading.

After driver.quit() , the ChromeDriver process may linger; manually kill it if necessary.

Docker integration : Build a Docker image based on robcherry/docker-chromedriver , copy Chinese fonts, install pip and Selenium, and update font caches. Example Dockerfile:

FROM robcherry/docker-chromedriver
COPY chinese /usr/share/fonts/chinese
RUN curl https://bootstrap.pypa.io/get-pip.py -o /tmp/get-pip.py && \
  python /tmp/get-pip.py && \
  pip install selenium && \
  mkfontscale && mkfontdir && fc-cache -fv
CMD ["/usr/local/bin/supervisord", "-c", "/etc/supervisord.conf"]

Build the image with docker build -t demo/html2canvas . and mount the Python script into the container to run the screenshot service, optionally exposing an HTTP endpoint that accepts a URL and DOM selector and returns the captured image.