惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

MongoDB | Blog
MongoDB | Blog
Recorded Future
Recorded Future
Jina AI
Jina AI
The Register - Security
The Register - Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
月光博客
月光博客
博客园 - 三生石上(FineUI控件)
F
Fortinet All Blogs
人人都是产品经理
人人都是产品经理
S
SegmentFault 最新的问题
Apple Machine Learning Research
Apple Machine Learning Research
L
LangChain Blog
Y
Y Combinator Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
GbyAI
GbyAI
The GitHub Blog
The GitHub Blog
Vercel News
Vercel News
博客园 - 【当耐特】
雷峰网
雷峰网
The Cloudflare Blog
阮一峰的网络日志
阮一峰的网络日志
aimingoo的专栏
aimingoo的专栏
云风的 BLOG
云风的 BLOG
I
InfoQ
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News
Security Latest
Security Latest
有赞技术团队
有赞技术团队
L
Lohrmann on Cybersecurity
P
Proofpoint News Feed
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
The Last Watchdog
The Last Watchdog
P
Privacy & Cybersecurity Law Blog
Scott Helme
Scott Helme
Google Online Security Blog
Google Online Security Blog
WordPress大学
WordPress大学
Hacker News - Newest:
Hacker News - Newest: "LLM"
NISL@THU
NISL@THU
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
B
Blog RSS Feed
Cyberwarzone
Cyberwarzone
K
Kaspersky official blog
F
Full Disclosure
Martin Fowler
Martin Fowler
Spread Privacy
Spread Privacy
D
Docker
C
Cisco Blogs
www.infosecurity-magazine.com
www.infosecurity-magazine.com
H
Hacker News: Front Page

博客园 - 逸乐太子

豆包无水印图片下载器|新媒体运营、自媒体创作者必备神器 免费无广告!网易UU远程,解锁远程办公、娱乐、运维全能玩法 告别手动复制!公众号文章批量导出工具,极致提升内容运营效率 高效办公神器:可视化Excel文档合并工具,告别手动复制粘贴 全国分省 Excel 爬取后,一键统计全文件数据行数|附即用型统计工具 台风数据采集全攻略:从数据源到实操落地 豆包生成的图片带有AI字样怎么去除? 中国马拉松官方网站赛历信息采集工具 国家标准批量采集工具:全量元数据检索 + 批量导出 知网文献批量采集:BibTeX/EndNote 完整导出(含摘要、关键词、被引、全文链接) 超级课堂题库下载本地工具 洋葱智课在线题库导出工具 【python爬虫定制】PubScholar公益学术平台期刊名称爬取 【python数据采集】阳光高考学校信息采集 python程序的守护工具 【Python数据采集】国家自然科学基金大数据知识管理服务门户数据采集 pyinstaller 打包时第三方模块与图片资源加载 使用python爬取豆瓣电影短评评论内容 使用 js 实现 urljoin 方法 使用 Python 爬取高校教师信息 python从PDF文件中读取国民经济行业分类 python爬虫之JS逆向某易云音乐 国务院办公厅放假通知信息获取 python爬虫之JS逆向 python爬虫之企某科技JS逆向 linux下telnet命令有时无法退出 H5中腾讯地图定位信息在安卓手机中获取不到
某速体育网站中canvas数据获取
逸乐太子 · 2026-05-05 · via 博客园 - 逸乐太子

image

数据使用canvas渲染出来的。

image

针对*速体育这种用 Canvas 渲染数字的反爬方案,我给你提供 4 种从易到难的逆向方法,其中Hook Canvas API 是通用杀招,不需要分析接口加密,100% 能拿到和页面显示完全一致的数据。

 核心原理

 所有 Canvas 绘制的文字,最终都必须通过浏览器标准 API CanvasRenderingContext2D.prototype.fillText(text, x, y) 来渲染。无论网站怎么加密数据、混淆 JS,只要它要显示文字,就绕不开这个 API。我们只需要拦截这个函数,就能直接拿到绘制的内容。


方法一:Hook Canvas API(最推荐,通用所有 Canvas 反爬)

 步骤 1:注入 Hook 代码(Chrome 浏览器直接用) 

  1. 打开开发者工具(F12)→ 切换到 Sources 面板 → 点击左侧 Snippets(代码片段)
  2. 新建一个片段,粘贴下面的代码,按 Ctrl+Enter 运行 
// 保存原始的fillText方法
const originalFillText = CanvasRenderingContext2D.prototype.fillText;

// 重写fillText方法,拦截所有绘制的文字
CanvasRenderingContext2D.prototype.fillText = function(text, x, y) {
    // 将绘制的文字存到Canvas元素的自定义属性上
    this.canvas.dataset.renderedText = text;
    // 调用原始方法,保证页面正常显示
    return originalFillText.call(this, text, x, y);
};

console.log('✅ Canvas文字拦截Hook已生效');

步骤 2:一键提取所有赔率数据 

运行 Hook 代码后,刷新页面(或切换标签页让 Canvas 重新渲染),然后在 Console 面板执行这行代码: 

// 专门针对雷速体育的赔率提取
const oddsData = Array.from(document.querySelectorAll('span[class*="exponent"] canvas'))
    .map(canvas => ({
        赔率数值: canvas.dataset.renderedText,
        时间节点: canvas.closest('tr').querySelector('td:first-child')?.textContent?.trim(),
        涨跌: canvas.parentElement.classList.contains('exponent-up') ? '涨' : '跌'
    }))
    .filter(item => item.赔率数值); // 过滤空Canvas

console.table(oddsData); 

你会直接得到一个格式化的表格,包含所有时间点的赔率数据。

自动化集成(Python+Playwright) 

如果需要写爬虫批量获取,直接把 Hook 代码注入到页面初始化阶段即可,不需要 OCR,速度极快:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    
    # 页面加载前注入Hook,一劳永逸
    page.add_init_script("""
        const originalFillText = CanvasRenderingContext2D.prototype.fillText;
        CanvasRenderingContext2D.prototype.fillText = function(text, x, y) {
            this.canvas.dataset.renderedText = text;
            return originalFillText.call(this, text, x, y);
        };
    """)
    
    # 打开目标比赛页面
    page.goto("https://www.leisu.com/match/你的比赛ID")
    page.wait_for_selector("canvas")
    
    # 提取数据
    data = page.evaluate("""
        () => Array.from(document.querySelectorAll('span[class*="exponent"] canvas'))
            .map(c => ({
                value: c.dataset.renderedText,
                time: c.closest('tr').cells[0].textContent.trim()
            }))
    """)
    
    print(data)
    browser.close()

方法二:抓包获取原始接口数据(最稳定,适合大规模爬虫) 

这是最根本的方法,直接获取网站后端返回的原始赔率数据,不需要解析前端。 

具体步骤 

  1. 打开 Network 面板 → 勾选 Preserve log(保留日志)→ 过滤 Fetch/XHR
  2. 刷新页面,观察请求 URL,雷速体育的赔率接口通常是:
    • https://api.leisu.com/api/odds/detail/比赛ID
    • https://api.leisu.com/api/match/odds/history/比赛ID 
  3. 查看响应内容,你会发现 JSON 里直接有 oddsexponentchange 等字段,对应页面上的所有赔率和涨跌数据 

注意事项 

  • 请求需要携带正确的 User-AgentRefererCookie
  • 部分接口可能有签名参数(如 signtimestamp),如果遇到加密,优先用上面的 Hook 方法
  • 接口有频率限制,建议添加 1-2 秒的随机延迟

方法三:OCR 识别(快速验证,最简单) 

如果只是临时需要少量数据,可以用 OCR 直接识别 Canvas 图片,准确率接近 100%(因为是标准数字字体)。 

Python 示例代码

from selenium import webdriver
from PIL import Image
import pytesseract
import io

driver = webdriver.Chrome()
driver.get("https://www.leisu.com/match/你的比赛ID")

# 识别所有Canvas
for canvas in driver.find_elements("tag name", "canvas"):
    # 直接截取Canvas元素的截图
    img = Image.open(io.BytesIO(canvas.screenshot_as_png))
    # 只识别数字和小数点,提高准确率
    text = pytesseract.image_to_string(
        img, 
        config="--psm 8 --oem 3 -c tessedit_char_whitelist=0123456789."
    )
    print(text.strip()) 

方法四:逆向 JS 代码(最彻底,难度最高)

如果需要深度定制爬虫,可以逆向网站的混淆 JS,找到数据处理的完整流程: 

  1. 全局搜索 fillTextcanvas,找到绘图函数的位置
  2. 在绘图函数处打上断点,刷新页面触发断点
  3. 向上追溯调用栈,找到传入的文字参数的来源
  4. 继续追溯到接口请求和解密函数,写出对应的 Python 解密代码 

针对*速体育的提示 

  • 混淆代码主要在 feilin010.xxx.jsfp_min.js
  • 可以用 js-beautify 先解混淆,再搜索关键词 oddsexponent

注意事项

  1. 法律风险:本方法仅供学习研究使用,爬取数据请遵守《网络安全法》和网站的 robots 协议,不要用于商业用途
  2. 反爬规避:雷速体育有 IP 封禁和行为检测,不要高频请求,建议使用代理池
  3. 稳定性对比:
    方法难度速度稳定性通用性
    Hook Canvas 极快 极高 所有 Canvas 网站
    接口抓包 极快 有公开接口的网站
    OCR 识别 极低 所有可视化内容
    JS 逆向 极快 极高 特定网站