当今互联网，为了防止内容被轻易抓取，网站的反爬机制可谓是花样百出。其中，动态加载图片、隐藏真实链接、图片分割重组以及加载后自动清除 Canvas 等技术，给爬虫工程师带来了不小的挑战。本文将结合一个实际案例，分享如何应对这些反爬策略，成功抓取动态加载的漫画图片。

案例背景：动态漫画图片的抓取挑战

我们以一个漫画网站为例，该网站的图片加载方式有以下几个特点：

1. 动态加载与 Canvas 渲染：漫画图片并非直接通过 <img> 标签展示，而是通过 JavaScript 动态生成，并渲染到 HTML5 的 <canvas> 元素上。这意味着无法直接通过解析 HTML 获取图片链接。
2. 隐藏真实链接：图片源数据通常以 Base64 编码的形式存在，并由 JavaScript 动态添加到 Canvas 中，原始图片链接并未直接暴露在 HTML 源码中。
3. 图片分割与重组（隐式）：虽然本案例代码没有明确体现图片分割重组，但这种技术在动态加载图片中很常见。网站可能将一张图片分割成多份，分别加载到不同的 Canvas 区域，或者通过 CSS 偏移等方式进行视觉上的重组，增加爬取难度。
4. 加载后自动清除 Canvas (潜在挑战)：某些网站为了节省资源或进一步反爬，可能会在图片渲染到 Canvas 后，将 Canvas 元素清除或其内容清空。这要求爬虫必须在 Canvas 内容存在时及时获取数据。

技术选型：Selenium 模拟浏览器行为

面对上述挑战，传统的 requests + BeautifulSoup 组合显得力不从心，因为它们无法执行 JavaScript。此时，Selenium 成为了理想的选择。Selenium 允许我们模拟真实用户的浏览器行为，包括执行 JavaScript、滚动页面、等待元素加载等，从而获取动态生成的内容。

爬取实战：代码解析与策略

下面我们将详细解析给定的 Python 代码，了解如何一步步抓取动态加载的漫画图片。

import re
from selenium import webdriver
from selenium.webdriver.common.by import By
import time
import base64
import os
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

url = "https://www.comicbox.com/.../..."
service = Service(executable_path=r"D:\chromedriver-win64\chromedriver.exe")
driver = webdriver.Chrome(service=service)
driver.get(url)

os.makedirs("comic_images", exist_ok=True)
count = 1

# 找到所有漫画页的div（每个div会生成一个canvas）
divs = driver.find_elements(By.CSS_SELECTOR, "div.cropped[data-src]")

for i, div in enumerate(divs):
    try:
        # 让div进入视口，触发canvas渲染
        driver.execute_script("arguments[0].scrollIntoView();", div)
        time.sleep(2)  # 停留等待canvas生成，可根据网速调整
        WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.TAG_NAME, "canvas"))
        )  # 等待canvas加载完成
        # 查找div下的canvas
        canvas = None
        try:
            canvas = div.find_element(By.CSS_SELECTOR, "canvas.canvas-fit")
        except:
            canvases = driver.find_elements(By.CSS_SELECTOR, "canvas.canvas-fit")
            if len(canvases) > i:
                canvas = canvases[i]
        if canvas:
            # 获取 Base64 数据
            data_url = driver.execute_script("return arguments[0].toDataURL();", canvas)
            '''
            在 JavaScript 的 toDataURL() 方法中，返回的 Base64 数据包含了图片的格式信息，
            但它是以字符串的形式嵌入在数据头部的。
            例如：data:image/jpeg;base64,/9j/4AAQSkZJRgABAQE...
            '''
            # 使用正则表达式提取图片格式
            match = re.match(r"data:image/(\w+);base64,", data_url)
            if match:
                ext = match.group(1)  # 提取格式，例如 'jpeg', 'png', 'webp'
            else:
                ext = "unknown"

            # 保存图片
            b64 = data_url.split(",", 1)[1]
            with open(f"comic_images/page_{count}.{ext}", "wb") as f:
                f.write(base64.b64decode(b64))
            print(f"保存 page_{count}.{ext}")
            count += 1
        else:
            print(f"未找到第{i+1}页的canvas")
    except Exception as e:
        print(f"处理第{i+1}页时出错: {e}")

input("抓取完成，按回车键关闭浏览器...")
driver.quit()

1. 初始化 WebDriver

from selenium import webdriver
from selenium.webdriver.chrome.service import Service

url = "https://www.comicbox.com/.../..."
service = Service(executable_path=r"D:\PY\chromedriver-win64\chromedriver.exe")
driver = webdriver.Chrome(service=service)
driver.get(url)

这里我们导入必要的模块，设置 ChromeDriver 的路径，并通过 driver.get(url) 访问目标网页。确保你已经下载了与你的 Chrome 浏览器版本兼容的 ChromeDriver。

2. 定位图片容器

divs = driver.find_elements(By.CSS_SELECTOR, "div.cropped[data-src]")

通过观察网页结构，我们发现每个漫画页都对应一个具有 cropped 类和 data-src 属性的 div 元素。这些 div 元素是 Canvas 生成的容器。（不同网站情况可能不一样，需自行分析目标网页结构）

3. 模拟滚动与等待 Canvas 渲染

for i, div in enumerate(divs):
    try:
        # 让div进入视口，触发canvas渲染
        driver.execute_script("arguments[0].scrollIntoView();", div)
        time.sleep(2)  # 停留等待canvas生成，可根据网速调整
        WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.TAG_NAME, "canvas"))
        )  # 等待canvas加载完成

这是爬取动态加载图片的关键步骤。为了让浏览器渲染 Canvas，我们需要将对应的 div 元素滚动到可视区域内。

• driver.execute_script("arguments[0].scrollIntoView();", div)：执行 JavaScript 将 div 元素滚动到视图中。
• time.sleep(2)：这里设置了一个固定的等待时间，用于等待 Canvas 内容的渲染。根据实际情况，可以调整这个时间，或者使用更智能的等待方式。
• WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.TAG_NAME, "canvas")))：使用 Selenium 的 WebDriverWait 机制，显式等待 <canvas> 元素出现在 DOM 中，最大等待时间为 10 秒。这比固定 time.sleep 更健壮。

4. 获取 Canvas 元素并提取 Base64 数据

        canvas = None
        try:
            canvas = div.find_element(By.CSS_SELECTOR, "canvas.canvas-fit")
        except:
            canvases = driver.find_elements(By.CSS_SELECTOR, "canvas.canvas-fit")
            if len(canvases) > i:
                canvas = canvases[i]
        if canvas:
            # 获取 Base64 数据
            data_url = driver.execute_script("return arguments[0].toDataURL();", canvas)

在 Canvas 渲染完成后，我们需要找到对应的 canvas 元素。

• div.find_element(By.CSS_SELECTOR, "canvas.canvas-fit")：首先尝试在当前 div 下查找具有 canvas-fit 类的 canvas 元素。
• 如果特定 div 下的 canvas 未找到，代码会尝试查找页面上所有 canvas.canvas-fit 元素，并根据当前 div 的索引来获取对应的 canvas。这是一种鲁棒性处理，应对某些复杂页面结构。
• driver.execute_script("return arguments[0].toDataURL();", canvas)：这是核心步骤！toDataURL() 是 HTML Canvas API 提供的一个方法，它能够将 Canvas 上的内容转换为 Base64 编码的 Data URL 字符串。这个字符串包含了图片的媒体类型和 Base64 编码的图片数据。

5. 解析 Base64 数据并保存图片

            # 使用正则表达式提取图片格式
            match = re.match(r"data:image/(\w+);base64,", data_url)
            if match:
                ext = match.group(1)  # 提取格式，例如 'jpeg', 'png', 'webp'
            else:
                ext = "unknown"

            # 保存图片
            b64 = data_url.split(",", 1)[1]
            with open(f"comic_images/page_{count}.{ext}", "wb") as f:
                f.write(base64.b64decode(b64))
            print(f"保存 page_{count}.{ext}")
            count += 1

获取到 data_url 后，我们需要从中提取图片的格式和实际的 Base64 数据。

• re.match(r"data:image/(\w+);base64,", data_url)：使用正则表达式从 Data URL 中提取图片格式（例如 jpeg、png、webp）。
• data_url.split(",", 1)[1]：Data URL 格式为 data:image/jpeg;base64,/9j/...，通过 , 分割可以获取到 Base64 编码的图片数据部分。
• base64.b64decode(b64)：将 Base64 编码的数据解码为二进制图片数据。
• with open(f"comic_images/page_{count}.{ext}", "wb") as f: f.write(base64.b64decode(b64))：将解码后的二进制数据写入文件，保存为图片。

总结与展望

通过以上技术，我们成功应对了网站的动态加载图片、隐藏真实链接等反爬机制。核心思想是利用 Selenium 模拟浏览器行为，执行 JavaScript，并通过 Canvas 的 toDataURL() 方法获取图片数据。

未来优化方向：

• 智能等待机制：当前代码中使用 time.sleep() 和 EC.presence_of_element_located 结合的方式，在某些网络环境或页面加载速度不稳定的情况下可能不够精确。可以考虑更复杂的等待条件，例如等待 Canvas 绘制完成（虽然 Canvas 本身没有直接的“绘制完成”事件，但可以通过观察其内容变化或加载完成后的特定 DOM 元素来判断）。
• 并发抓取：对于大量图片的爬取，可以考虑使用多线程或异步编程（如 asyncio），结合 Selenium 的无头模式，提高抓取效率。
• 代理与反识别：面对更严格的反爬策略，可能需要结合代理 IP 池、User-Agent 轮换、Headless 模式下的反检测（如 undetected_chromedriver）等技术。

希望这篇技术分享能为您在爬取动态加载图片时提供帮助。随着反爬技术的不断演进，爬虫技术也需要不断学习和创新，才能更好地应对挑战。