使用Python,将网页动画转为GIF

前言

最近给网站加入了懒加载动画,避免懒加载的时候图片“鬼跳”,遂在网上寻找免费的个人使用素材,但是这个时候又出现了一个问题:如何捕获使用HTML5+CSS前端实现的动画,将其转换为GIF?

最开始我想到了的是开源ScreenToGif,但是一番体验下来,结果有点不尽人意,主要是帧率感觉太卡了,抓取下来动画不连贯,而且文件比较大,对于一个站点来说,尤其是加载动画,如果过大到时候加载动画比图片加载还慢半拍那就没有意义了。

遂使用搜索引擎+AI相结合完成了Python+Webdriver实现相关效果。

代码使用

执行后会先让你输入网址,随后它会自动根据你设置的休眠时间与帧率进行捕获。

综合下来比使用ScreenToGif抓取更加高效占用空间低。

以下为代码执行时示例图:

自动化执行过程

以下为代码实现

开始之前请通过pip安装相关依赖(我这里使用的是谷歌的Chrome webdriver,请根据你的实际情况调整),这里默认给你们配置了临时使用清华源下载相关依赖。

pip install selenium webdriver-manager Pillow imageio -i https://pypi.tuna.tsinghua.edu.cn/simple

依赖安装完成后即可通过以下代码自行调整然后进行动画抓取啦!

import time
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from PIL import Image
import imageio
from io import BytesIO

def main():
# 从终端获取URL
url = input("请输入目标网页的URL: ")

try:
# 配置WebDriver,自动获取最新的ChromeDriver
service = Service(ChromeDriverManager().install())
options = webdriver.ChromeOptions()
options.add_argument('--headless') # 如果不需要显示浏览器窗口,可以启用无头模式
options.add_argument('--window-size=800,600')

# 启动WebDriver
print("启动WebDriver...")
driver = webdriver.Chrome(service=service, options=options)

# 打开目标网页
print(f"打开目标网页: {url}")
driver.get(url)

# 等待动画加载(根据需要调整时间)
print("等待动画加载...")
time.sleep(5)

# 截取帧并保存到列表
frames = []
num_frames = 30 # 需要的帧数
print("开始捕获帧...")
for i in range(num_frames):
screenshot = driver.get_screenshot_as_png()
img = Image.open(BytesIO(screenshot))
frames.append(img)
print(f"捕获帧 {i + 1}/{num_frames}")
time.sleep(0.1) # 间隔时间,根据动画速度调整

# 关闭浏览器
print("关闭浏览器...")
driver.quit()

# 保存帧为GIF
output_file = 'web_animation.gif'
print(f"保存帧为GIF文件: {output_file}")
frames[0].save(
output_file,
save_all=True,
append_images=frames[1:],
duration=100,
loop=0
)
print("GIF文件已保存。")

except Exception as e:
print(f"发生错误: {e}")

finally:
driver.quit()

if __name__ == "__main__":
main()

最后附上我的GIF加载动画

loading