浏览器截屏(chrome截屏快捷键)

服务器端截屏是在Chrome环境下结合selenium+html2canvas生成图片实现的。

Selenium是使用最广泛的开源Web UI自动化测试套件之一。本文使用selenium的PythonSKD，通过代码段来完成对selenium的操作。

2 html2canvas是一个js库，可以在浏览器上抓取网页的“截屏”或其中的一部分。

总体思路是在服务器端搭建chromedriver环境，用selenium实现打开网页、运行js等一系列动作。然后通过注入html2convas的js代码，得到当前页面浏览器的任意dom元素的图像。这样就可以在服务器端拦截任何网页区域。主要介绍在Linux环境下，通过各种工具的组合，抓取任意区域生成图片的方法，其他系统中的方法也差不多。

环境准备

chrome驱动程序安装

首先，你需要安装浏览器内核环境，你可以在https://chromedriver.chromium.org官方网站下载需要的版本。如果Linux没有中文字体，需要安装中文字体，避免网页乱码。

硒装置

pip安装硒

html2canvas

你可以去https://html2canvas.hertzen.com/看看如何使用html2canvas。

运行方法

初始化

加载浏览器环境并打开网页。如果chromedriver不在系统路径下，需要在webdriver中添加executable_path参数。Chrome()并指定chromedriver路径。

从selenium导入webdriver # chrome参数chrome _ options = web driver . chrome options()chrome _ options . add _ argument(& # 39；-无头& # 39；)chrome _ options . add _ argument(& # 39；-不-沙盒& # 39；)chrome _ options . add _ argument(& # 39；-disable-dev-shm-usage & # 39；)driver = web driver . chrome(chrome _ options = chrome _ options)#加载网站driver . get(& # 34；https://github.com/trending")时间.睡眠(1)

注入脚本

首先需要介绍html2canvas的js库。这里，html2canvas是通过创建一个脚本标记并将其附加到head来实现的。

html2canvas = & # 34""var s = window . document . createelement(& # 39；脚本& # 39；);s.src = & # 39https://html 2 can vas . hertz en . com/dist/html 2 can vas . min . js & # 39；；window . document . head . appendchild；"""driver . execute _ script(html 2 can vas)ime . sleep(1)然后根据实际情况，获取dom元素，生成dom元素的图像数据。这里用的是html2canvas的方法。当画布被成功转换时，包含图像数据的元素被添加到主体中。该元素可以是任何元素，主要用于存储图片数据。因为html2canvas()函数不能立即将图片数据作为返回值传递给python的execute_script()函数。因此，通过共享dom元素，实现了图像数据传输。

buildImage = & # 34""html 2 can vas(document . query selector(& # 39；# side _ nav & # 39)).然后(canvas = & gt{ data = canvas . toda taurl(& # 39；图像/JPEG & # 39；, 0.98);var input = document . createelement(& # 39；输入& # 39；);input . set attribute(& # 39；类型& # 39；, '正文& # 39；);input . set attribute(& # 39；id & # 39, 'html2canvas _ data & # 39);input . set attribute(& # 39；价值& # 39；，数据)；document . body . appendchild(input)})；返回数据；"""driver . execute _ script(buildimage)time . sleep(1)最后，获取图片信息。读取上一步生成的id为html2canvas_data的元素中存储的图片数据。execute_script()函数的返回值是图片的base64数据。

imageData = & # 34""return document . getelementbyid(& # 39；# html2canvas _ data & # 39).get attribute(& # 39；价值& # 39；);"""Data = driver.execute _ script(图像数据)退出chrome

driver.quit()

图象生成

在前面的步骤中，最后一次js执行的返回结果是图像的base64值。通过base64解码，可以得到画面。这里需要注意的是，base64结果在返回值中会包含一条图片信息数据:data:image/JPEG；base64，100 .解码时需要在转码前去掉。

注意

执行每一条js后，需要增加延时，保证js执行成功。也可以使用selenium提供的显性等待函数WebDriverWait,完成监听元素加载状态。加载html2canvas.js库时，若网站设置了安全策略，如跨域、域限制等策略，需要想方法绕过，再加载js实际应用时，可将js下载到内网，加快js加载速度实际应用时，可能会出现driver.quit()后，chromdriver进程仍然存在，需要手动kill集成Docker

将上述所有需要的软件放入docker。当一个新的环境需要时，不需要重新安装，同时也可以避免环境差异带来的意想不到的问题。

如果有业务需求，将上述图片生成方法与自身业务需求相结合，在Docker中完成业务实现，从而提供可以生成业务需求的浏览器截屏服务。比如设置一个http服务，通过传入网址和对应的dom元素，返回对应dom元素的图像数据。

下面是一个简单的环境，可以基于现有的chromedriver镜像robcherry/docker-chromedriver运行浏览器截屏程序。在chromedriver的基础上，添加字体库，安装selenium。

从rob cherry/docker-chrome driver copy Chinese/usr/share/fonts/chineseRUN curl https://bootstrap.pypa.io/get-pip.py-o/tmp/get-pip . py & & \ python/tmp/get-pip . py & & \ pip安装selenium & & \ mkfontscale & & mkfontdir & & fc-cache-fvCMD[& # 34；/usr/local/bin/supervisord & # 34；, "-c & # 34；, "/etc/supervi sord . conf & # 34；]其中中文是字体目录，可以使用Windows系统下字体目录中的字体文件。然后生成一个镜像:

Docker build -t演示/html2canvas。最后，将上面的python程序挂载到容器中，在容器中运行它，并检查效果。

关于360科技:360科技是360科技团队打造的科技分享微信官方账号，每天推送技术干货。更多技术资讯，请关注“360科技”微信微信官方账号。