文章目录
一、背景
有这么一个需求,公司每日邮件中推送一个echart报表,最简单的方法就是附上截屏图片,嵌入到邮件html中。报表是现成的网页,所以想到了后台自动截图存到服务器,再推送到邮件中。
二、如何实现?
1.安装chrome无头浏览器(Linux环境)
// 1. 添加yum源
sudo vim /etc/yum.repos.d/google.repo
// 在repo文件中添加以下内容
[google]
name=Google-x86_64
baseurl=http://dl.google.com/linux/rpm/stable/x86_64
enabled=1
gpgcheck=0
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub
// 2. yum 安装chrome
[root@VM-0-13-centos]# yum install goole-chrome-stable --nogpgcheck
// 查看chrome版本
[root@VM-0-13-centos]# google-chrome --version
[root@VM-0-13-centos]# Google Chrome 101.0.4951.64
2. 下载 chrome-driver
下载驱动要注意一点 chrome 版本要和driver版本对上,不然会出现不兼容的问题,如上我们安装的chrome版本是101.0.4951.64
,我们去网站找到大版本相匹配的diver;
点击–>chrome-driver下载网址 查看版本,我们安装最接近的版本,如图:
下载压缩包解压
// 下载压缩包
[root@VM-0-13-centos local]# wget http://chromedriver.storage.googleapis.com/101.0.4951.41/chromedriver_linux64.zip
// 解压文件到指定目录
[root@VM-0-13-centos local]# unzip chromedriver_linux64.zip -d /usr/local/chrome-driver/
// 添加软链接
[root@VM-0-13-centos ~]# ln -s /usr/local/chrome-driver/chromedriver /usr/bin/chromedriver
ok,到这里无头浏览器就差不多装好了,接下来就是安装selenium包,用pip安装就行
[root@VM-0-13-centos ~]# pip3 install selenium
如图
3. 编写python脚本测试截图
'''
Author: Alan
Date: 2022-05-13 15:41:49
Description: 网页截屏
'''
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.options import Options
import time
import os
# chrome-driver 安装路径
DRIVER_PATH = '/usr/bin/chromedriver'
# 若是windows环境下
# DRIVER_PATH = 'C:\Program Files (x86)\Google\Chrome\Application\chromedriver'
img_path = '/data/script/py/img' # 存放截图的位置
if __name__ == "__main__":
# 浏览器基础配置
options = Options()
options.add_argument('--no-sandbox')
# options.add_argument('--headless') # 无头参数
options.add_argument('--disable-gpu') # 禁用gpu 防止占用资源出现bug
options.add_argument('window-size=1920x1080') # 设置分窗口辨率
options.add_argument('--start-maximized') # 最大化运行(全屏窗口),不设置,取元素可能会报错
options.add_argument('--hide-scrollbars')
# 启动浏览器
driver = Chrome(executable_path=DRIVER_PATH, options=options)
try:
# 访问页面
driver.get('https://blog.csdn.net/littleWhiteSan')
# 截屏
img_name = time.strftime(
'%Y-%m-%d', time.localtime(time.time())) # 截屏名称 时间表示
img = "%s.png" % os.path.join(img_path, img_name) # 图片
driver.get_screenshot_as_file(img) # 保存截图
except Exception as e:
print(e)
driver.close() # 关闭浏览器
driver.quit()
脚本写好了,我们把脚本放在在服务器上面运行一下
img 文件夹存放截图
python3 screenshoot.py
效果如下:
问题来了,乱码,原因是服务器没有中文字体包,复制一份中文字体到服务器上面即可解决
1.找到免费的中文字体包
2.上传到服务器上
3.刷新字体缓存
将下面字体包放到服务器/usr/share/fonts/
安装字体管理刷新缓存
yum install fontconfig mkfontscale
cd /usr/share/fonts/
mkfontscale
mkfontdir
fc-cache -fv
相关博客 https://blog.csdn.net/a___lei/article/details/118113211
问题已解决。
4. 模拟登陆,定点裁剪
如果需要登录之后再去截屏那么该如何操作?
- 找到登录密码账号输入框和登录按钮
- 打开开发着工具,复制xPath
- py脚本写入账号密码,点击登录
准备:裁剪图片用到了PIL,未安装模块需要先安装
pip3 install pillow
脚本如下
'''
Author: Alan
Date: 2022-05-13 15:41:49
Description: 打开网页
'''
from selenium.webdriver import Chrome
from selenium.webdriver.chrome.options import Options
import time
import os.path
from PIL import Image
# chrome-driver 安装路径
DRIVER_PATH = '/usr/bin/chromedriver'
# DRIVER_PATH = 'C:/Program Files (x86)/Google/Chrome/Application/chromedriver' # windows下
img_path = '/data/script/py/img/' # 存放截图的位置,要注意权限,确保脚本有权限访问和操作文件
# img_path = "D:/work/screenshoot/" # windows下
if __name__ == "__main__":
# 浏览器基础配置
options = Options()
options.add_argument('--no-sandbox')
options.add_argument('--headless') # 无头参数
options.add_argument('--disable-gpu') # 禁用gpu 防止占用资源出现bug
options.add_argument('window-size=1920x1080') # 设置分窗口辨率
options.add_argument('--start-maximized') # 最大化运行(全屏窗口),不设置,取元素会报错
options.add_argument('--hide-scrollbars')
# 启动浏览器
driver = Chrome(executable_path=DRIVER_PATH, options=options)
try:
# 访问页面
driver.get('https://blog.csdn.net/littleWhiteSan')
# 登陆博客 去定点截图
driver.get('https://passport.csdn.net/login?code=applets')
time.sleep(.5)
driver.find_element_by_xpath(
'/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[1]/span[4]').click() # 点击密码登录
# 输入账号密码
driver.find_element_by_xpath(
'/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[2]/div/div[1]/div/input').send_keys('*******')
driver.find_element_by_xpath(
'/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[2]/div/div[2]/div/input').send_keys('******')
# 点击登录
driver.find_element_by_xpath(
'/html/body/div[2]/div/div[2]/div[2]/div[1]/div/div[2]/div/div[4]/button')
# 等跳转
time.sleep(1)
# 跳转我的第一篇文章
driver.get(
'https://blog.csdn.net/littleWhiteSan/article/details/124375478?spm=1001.2014.3001.5501')
time.sleep(2)
# 截取全屏 如果我们的浏览器窗口不够长,就会导致截图不全,这时候我们设置一下无头浏览器的宽高确保截取全
# 注意:在windows下设置宽高,需要headless参数,不然截取也会不全
width = driver.execute_script(
"return document.documentElement.scrollWidth")
height = driver.execute_script(
"return document.documentElement.scrollHeight")
driver.set_window_size(width, height)
# 截屏
img_name = time.strftime(
'%Y-%m-%d', time.localtime(time.time())) # 截屏名称 时间表示
img = "%s.png" % os.path.join(img_path, img_name) # 图片
driver.get_screenshot_as_file(img) # 保存截图
# 找到我们需要截图的元素的id 或者xpath 去裁剪图片
shootElement = driver.find_element_by_xpath(
'//*[@id="mainBox"]/main/div[1]')
size = shootElement.size
location = shootElement.location
rangle = (int(location['x']), int(location['y']), int(
location['x'] + size['width']), int(location['y'] + size['height'])) # 写成我们需要截取的位置坐标
i = Image.open(img) # 打开截图
frame4 = i.crop(rangle) # 使用Image的crop函数,从截图中再次截取我们需要的区域
frame4.save(img_path+'crop_shoot.png') # 保存裁剪的图片
driver.close() # 关闭浏览器
driver.quit()
print('done')
except Exception as e:
print(e)
driver.close() # 关闭浏览器
driver.quit()
测试一下:
python3 screenshoot.py
ok,执行没问题,我们来看下效果图
第一个图片是裁剪好的图片,第二个是截取的全屏图片,裁剪效果如下:
裁剪博客全文ok,脚本测试通过~
4. 嵌入邮件
若是要在outlook邮件中推送截图,只需要将截图作为附件插入到邮件中,在html中写入cid就行,如下:
Tips: 在windows下面就是改改驱动路径什么的,脚本内容大致一样,这里就不赘述了。
三、 结论
以上就是全部内容了,简单好用,如果对您有用的话请点个赞,有问题请留言指出,我会及时学习更正,谢谢各位大佬~