文章讲述了如何利用Python的selenium库将HTML网页转换为图片,并通过滚动截取整个页面。过程中详细讲解了如何配置Chrome浏览器驱动,处理中文乱码问题,以及实现图片的拼接。同时,提供了在云服务器上安装谷歌浏览器和设置字体的步骤。
import os
import time
from PIL import Image
from loguru import logger
from selenium import webdriver
from selenium.webdriver.common.by import By
class HtmlToImg(object):
'''
html转图片
'''
def __init__(self, url: str):
'''
@params url -> 图片网络地址;
'''
self._url = url
self._js_to = "window.scroll({top:%d,left:0,behavior:'auto'});" # 滚动到
self._js_end = "window.scroll({top:document.body.clientHeight,left:0,behavior:'auto'});" # 滚动到尾巴
if 'Windows' == platform.system():
self._driver_path = 'chromedriver.exe' # windows驱动路径
elif 'Linux' == platform.system():
self._driver_path = '/root/project/code/vehicle_information/backstage/chromedriver' # linux驱动路径
@staticmethod
def join_images(png1, png2, size=0, output='result.png'):
"""
图片拼接
@param png1: 图片1
@param png2: 图片2
@param size: 两个图片重叠的距离
@param output: 输出的图片文件
@return None
"""
img1, img2 = Image.open(png1), Image.open(png2)
size1, size2 = img1.size, img2.size # 获取两张图片的大小
joint = Image.new('RGB', (size1[0], size1[1] + size2[1] - size)) # 创建一个空白图片
loc1, loc2 = (0, 0), (0, size1[1] - size) # 设置两张图片要放置的初始位置
joint.paste(img1, loc1) # 分别放置图片
joint.paste(img2, loc2)
joint.save(output) # 保存结果
os.remove(png2)
def start(self, width: int = 500, height: int = 800):
'''开始截取图'''
option = webdriver.ChromeOptions()
option.add_argument('--headless')
option.add_argument('--no-sandbox')
option.add_argument('--disable-gpu')
option.add_argument('--disable-dev-shm-usage')
driver = webdriver.Chrome(executable_path=self._driver_path, options=option)
driver.set_window_size(width, height)
driver.get(self._url)
time.sleep(3)
driver.save_screenshot('result.png')
# 获取body大小
body_h = int(driver.find_element(By.XPATH, '//body').size.get('height'))
logger.debug(f'页面总高:{body_h}')
# 计算当前页面截图的高度
# (使用driver.get_window_size()也可以获取高度,但有误差,推荐使用图片高度计算)
current_h = Image.open('result.png').size[1]
logger.success(f'图片高:{current_h}')
logger.warning(f'循环结束:{body_h / current_h}')
for i in range(1, int(body_h / current_h)):
logger.debug(f'当前循环高度:{current_h * i}') # 1. 滚动到指定锚点
driver.execute_script(self._js_to % (current_h * i))
driver.save_screenshot(f'test_{i}.png') # 2. 截图
self.join_images('result.png', f'test_{i}.png')
logger.success(f'开始处理最后一张')
driver.execute_script(self._js_end) # 处理最后一张图
driver.save_screenshot('test_end.png')
self.join_images('result.png', 'test_end.png', size=current_h - int(body_h % current_h)) # 拼接图片
[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
然后使用yum install的命令在线安装谷歌浏览器:
yum -y install google-chrome-stable --nogpgcheck
安装完成之后的话,使用 google-chrome --version 命令查看安装的谷歌浏览器的版本,然后从网上去下载浏览器对应版本的驱动文件。
驱动下载地址:
https://sites.google.com/a/chromium.org/chromedriver/downloads
http://chromedriver.storage.googleapis.com/index.html
下载完解压后,记得检查驱动文件是否为可执行状态,不然到时候是无法启动浏览器执行用例的。
# 创建中文字体目录
mkdir -p /usr/share/fonts/chinese/
# 将字体文件拷贝到中文字体目录中
cp songti.ttf /usr/share/fonts/chinese/
cd /usr/share/fonts/chinese/
# 为刚加入的字体设置缓存使之有效
fc-cache -fv
# 查看系统中的字体
fc-list
安装好中文字体之后,再次执行Selenium截图时中文就不会显示为方块了。