通过ChatsNow来辅助完成Python+Selenium+Chrome实现网页浏览截图

当我们想要使用Docker来部署我们的项目并且通过Python+Selenium+Chrome的方式来实现无头浏览器截图功能，如果你有什么疑问也可以访问我们公众号，下方图片有二维码哦，啾咪。最终的样式如下：

那么我们该如何实现这个功能呢：

首先我们需要引入Selenium依赖库：

pip install selenium

之后我们需要Chrome浏览器的安装包和驱动包。因为我们需要安装至Linux环境，并且驱动包和安装包的版本需要保持一致：Chrome的驱动包和安装包下载链接：http://chromedriver.chromium.org/downloads

这里我选在是ChromeDriver 120.0.6099.109 版本和Google Chrome 120.0.6099.109（记住重要的一点：一定要版本保持一致）

之后编写我们的代码：

from selenium import webdriver
import sys
import asyncio

sys.path.append('./')


async def getPic(filemd5: str):
    scroll = 500
    scroll_interval = 0.1
    filename = bucket_path + filemd5 + ".png"
    options = webdriver.ChromeOptions()
    options.add_experimental_option("excludeSwitches", ["enable-automation"])
    options.add_experimental_option("useAutomationExtension", False)
    options.add_argument('--no-sandbox')
    options.add_argument('--disable-dev-shm-usage')
    options.add_argument('--disable-extensions')
    options.add_argument('--headless')
    options.add_argument(' remote-debugging-port=9222')
    driver = webdriver.Chrome(options=options)
    try:
        # 指定HTML文件的路径ls
        file_path = "/opt/app-root/src/wechat-api/webhtml/index.html?urlmd5=" + filemd5
        # 打开指定路径的HTML文件
        driver.get('file:///{}'.format(file_path))
        await asyncio.sleep(5)
        #滚动截图
        js_height = "return document.body.clientHeight"
        k = 1
        height = driver.execute_script(js_height)
        while True:
            if k * scroll < height:
                js_move = "window.scrollTo(0,{})".format(k * scroll)
                driver.execute_script(js_move)
                await asyncio.sleep(scroll_interval)
                height = driver.execute_script(js_height)
                k += 1
            else:
                break
            # 截图总高度最大量
            if height > 40000:
                break
        width = driver.execute_script("return document.body.scrollWidth")
        height = driver.execute_script("return document.body.scrollHeight")
        # 将浏览器的宽高设置成刚刚获取的宽高
        driver.set_window_size(width, height)
        ##对于当前这个页面调用接口是否成功
        console = driver.get_log("browser")
        print(console)
        if console is None:
            return None
        url = 'webhtml/' + filemd5 + '.png'
        driver.save_screenshot(url)
    except Exception as e:
        return None
    finally:
        driver.close()

在本地我们也只需要安装你本地系统的所需要的Chrome和ChromeDriver

之后编写我们的DockerFile：

# 拷贝基础镜像
FROM **************************

# 复制代码 
COPY ./ /opt/app-root/src/*******

# 定位到工作目录
WORKDIR /opt/app-root/src/*****

#安装中文字体库
RUN yum grouplist hidden
RUN yum -y groupinstall Fonts
RUN fc-cache -fv
RUN fc-list

#安装chrome
#RUN wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
RUN yum -y localinstall google-chrome-stable-120.0.6099.109-1.x86_64.rpm
RUN rm -f google-chrome-stable_current_x86_64.rpm

#安装chromedriver
RUN chmod 777 chromedriver
RUN mv chromedriver /usr/bin/

# 安装虚拟环境
RUN pip install --no-cache-dir --no-deps -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

# 启动命令

在使用DockerFile启动项目时遇见的几个问题：

1.ChromeDriver需要放入到/usr/bin目录下

2.Chrome安装完毕后，他在访问你本地的HTML时需要指定绝对路径，要不然会出现无法访问到页面的问题

3.如果你的本地没有中文字体库时，你需要安装中文字体库

之后你就可以正常的通过Chrome截取长图，并保存啦。

最后给大家推荐一款我在使用的AI插件：ChatsNow，在编写代码查问题给与了我很大的帮助，推荐开发者使用。