爬取Canvas标签的数据（获取截屏）

前言

爬取canvas有两种办法，一种是获取其base64数字码，第二种是直接截屏，我两种都试过，但第一种过于繁琐，也会导致内存紧张（一截屏的数字码都有几MB大小了(╯‵□′)╯︵┻━┻），所以我展现第二种方式，截屏。

实操

建议使用python，python有个很好的类库

首先install三个个类库，一个numpy，一个selenium，还有一个PIL。

然后去网上下载谷歌驱动到你的python安装目录下

下载链接：http://chromedriver.storage.googleapis.com/index.html

例子如下：

import time
import numpy as np
from PIL import Image
from numpy import array
from selenium import webdriver
from selenium.webdriver.common.by import By
# 需要先安装谷歌驱动（http://chromedriver.storage.googleapis.com/index.html）安装你谷歌浏览器对应的版本，放在python安装目录下，不然会报错：找不到驱动
opt = webdriver.ChromeOptions()
# opt.add_argument('headless')  # 设置option,后台运行
driver = webdriver.Chrome(options=opt)  # 创建浏览器对象

url = "https://weread.qq.com/web/bookDetail/5de32c70719cc6825de03e5"
path = '.\\'

driver.get(url)# 打开网页
driver.find_element(By.CLASS_NAME, value = "blue").click()
# window_height = driver.get_window_size()['height'] - 130  # 窗口高度

# driver.execute_script(f'document.getElementsByClassName("readerTopBar")[0].style.display="none"')
# driver.save_screenshot(r'.\screenshot.png')
test = 1
while test <= 19:
    time.sleep(1)# 给系统一个反应的时间
    window_height = driver.get_window_size()['height'] - 130  # 窗口高度
    page_height = driver.execute_script('return document.documentElement.scrollHeight')  # 页面高度
    if page_height > window_height:
        n = (page_height / window_height)  # 需要滚动的次数
        path2 = ".\\snapshot\\"
        driver.execute_script(f'document.getElementsByClassName("readerTopBar")[0].style.display="none"')
        driver.save_screenshot(r'.\screenshot.png')
        base_mat = np.atleast_2d(Image.open(r'.\screenshot.png'))  # 打开
        for i in range(int(n)):
            driver.execute_script(f'document.documentElement.scrollTop={window_height * (i + 1)};')
            fileName = fr"snapshot_{i}.png"
            time.sleep(0.5)
            driver.save_screenshot(path+fileName)  # 保存截图
            mat = np.atleast_2d(Image.open(path+fileName))  # 打开截图并转为二维矩阵
            base_mat = np.append(base_mat, mat, axis=0)  # 拼接图片的二维矩阵

        file_path = fr".\mySnapshot_{test}.png"
        print(file_path)
        Image.fromarray(base_mat).save(file_path)
    test += 1
    if test != 19:
        driver.find_element(By.CLASS_NAME,value="readerFooter_button").click()

里面的注解讲的挺详尽的，我这里粗略的说一下

思想是将每一个页面都依据屏幕大小分成好几段，然后再将这好几段的截屏合并，这一页的屏幕就截下来了。

至于保证无缝隙嘛，就靠自己慢慢试数据咯。希望拓印文字的话，搞个图片转文字的类库即可。

步骤讲解

1. 创建chrome的对象

opt = webdriver.ChromeOptions()
# opt.add_argument('headless')  # 设置option,后台运行
driver = webdriver.Chrome(options=opt)  # 创建浏览器对象

2. 设置好爬取的url并打开

url = "https://weread.qq.com/web/bookDetail/5de32c70719cc6825de03e5"
path = '.\\'
driver.get(url)# 打开网页

3. 获取爬取的元素

driver.find_element(By.CLASS_NAME, value = "blue").click()

4. 设置爬取几页

test = 1
while test <= 19:
    time.sleep(1)# 给系统一个反应的时间

5. 获取单页面的爬取高度，将所有的截屏截下来后再合并

    window_height = driver.get_window_size()['height'] - 130  # 窗口高度
    page_height = driver.execute_script('return document.documentElement.scrollHeight')  

6. 遍历单页面的所有截屏

    if page_height > window_height:
        n = (page_height / window_height)  # 需要滚动的次数
        path2 = ".\\snapshot\\"
        driver.execute_script(f'document.getElementsByClassName("readerTopBar")[0].style.display="none"')
        driver.save_screenshot(r'.\screenshot.png')
        base_mat = np.atleast_2d(Image.open(r'.\screenshot.png'))  # 打开
        for i in range(int(n)):
            driver.execute_script(f'document.documentElement.scrollTop={window_height * (i + 1)};')
            fileName = fr"snapshot_{i}.png"
            time.sleep(0.5)

7.保存单个屏幕截屏并合并截屏

            driver.save_screenshot(path+fileName)  # 保存截图
            mat = np.atleast_2d(Image.open(path+fileName))  # 打开截图并转为二维矩阵
            base_mat = np.append(base_mat, mat, axis=0)  # 拼接图片的二维矩阵

        file_path = fr".\mySnapshot_{test}.png"
        Image.fromarray(base_mat).save(file_path)
    test += 1

8.跳转下一页

    if test != 19:
        driver.find_element(By.CLASS_NAME,value="readerFooter_button").click()