V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐学习书目
Learn Python the Hard Way
Python Sites
PyPI - Python Package Index
http://diveintopython.org/toc/index.html
Pocoo
值得关注的项目
PyPy
Celery
Jinja2
Read the Docs
gevent
pyenv
virtualenv
Stackless Python
Beautiful Soup
结巴中文分词
Green Unicorn
Sentry
Shovel
Pyflakes
pytest
Python 编程
pep8 Checker
Styles
PEP 8
Google Python Style Guide
Code Style from The Hitchhiker's Guide
AlanBrian
V2EX  ›  Python

请教下有什么方案可以在服务器上把 html 转成图片

  •  
  •   AlanBrian · 114 天前 · 3348 次点击
    这是一个创建于 114 天前的主题,其中的信息可能已经有所发展或是发生改变。

    服务器是 ARM 架构的。html 的主要内容是 echarts 。

    第 1 条附言  ·  114 天前
    因为项目使用的 python ,所以用 python 方便点。最后采用 selenium+geckodriver 方案。这个需要下载对应操作系统的 firefox 浏览器。
    浏览器下载地址(其他地方没找到能下载 arm 的) https://www.mozilla.org/zh-CN/firefox/all/desktop-nightly/
    geckodriver 下载地址 https://github.com/mozilla/geckodriver/releases

    目前已经完美解决了。

    其中比较坑的地方是 x86_64 服务器少了个 libasound.so.2 库,导致程序运行的时候浏览器 255 异常退出,Service 加了日志输出才知道。但是比较疑惑的是这个库好像是音频需要的(从 AI 得知),截屏应该也不需要音频吧?有知道的大佬帮忙解个疑惑,感激不尽。

    最后感谢各位的建议🙏
    29 条回复    2024-09-05 16:52:59 +08:00
    tool2dx
        1
    tool2dx  
       114 天前
    无头调用 chrome 的内置 api 截图功能,echarts 强依赖 js 运行期,又没办法直接解析文件的。

    有个叫 devtools-protocol 协议,可以通过 websocket 发送控制命令,并下载 jpeg 截图。
    wangbin526
        2
    wangbin526  
       114 天前 via Android   ❤️ 1
    偶是用 go 动态生成 html 的 echart 然后转图片再插入 pdf ,用的是 docker 的 lampnick/doctron ,实测 arm 能用,一秒三五张连续转了几万张也没出问题
    Gilfoylek
        3
    Gilfoylek  
       114 天前
    刚做过类似功能 [chromedp]( https://pkg.go.dev/github.com/chromedp/chromedp) 我们用的是 golang 的包
    money1991
        4
    money1991  
       114 天前
    docker 里跑 Puppeteer ,它有转图片 api ,非常方便
    PolarBears
        5
    PolarBears  
       114 天前
    playwright
    dudubaba
        6
    dudubaba  
       114 天前
    一般都是 html 转 canvas 转图片,或者转 pdf 再拆分图片,都有现成的库吧。
    xiaoriri666
        7
    xiaoriri666  
       114 天前
    直接用 serverless ,阿里云直接部署个,就是冷启动有点慢,如果量不是很大可以用
    yph007595
        8
    yph007595  
       114 天前
    python 之 selenium ,我现在就用这个定时发送图表
    moxiaonai
        9
    moxiaonai  
       114 天前
    playwright, puppeteer 之类的,缺点是内存占用有点大,qps 大的话,服务容易崩
    AlanBrian
        10
    AlanBrian  
    OP
       114 天前
    因为程序使用的 python ,目前用的 pyppeteer 无头调用 chrome 生成图片。但是有个问题,在 https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html 下载 mac 和 Windows 对对应的 chrome 包,然后在对于系统代码运行都没问题,可以生成图片。但是下载 linux_x64 的包在 x64 服务器上运行就报错了(我是想先在 x64 架构的服务器运行测试通过再去尝试 ARM 架构的)。大佬知道是什么原因吗?
    还有你说的这个“devtools-protocol 协议,可以通过 websocket 发送控制命令”哪里可以参考吗?感谢🙏
    @tool2dx
    tool2dx
        11
    tool2dx  
       114 天前
    @AlanBrian https://github.com/ChromeDevTools/awesome-chrome-devtools

    我是抓页面数据没办法,要用到 websocket 的 devtools 协议。一般截图用 api 就够了,不用上这个协议的。
    daxin945
        12
    daxin945  
       114 天前
    selenium + firefox 无头浏览器 部署在 arm 架构的国产化操作系统上跑过
    horizon
        13
    horizon  
       114 天前
    @wangbin526 #2
    清晰度有问题没
    kenilalexandra
        14
    kenilalexandra  
       114 天前
    屏幕截图不行?
    AlanBrian
        15
    AlanBrian  
    OP
       114 天前
    @daxin945 请问下 arm 架构的 firefox 浏览器在哪下载呢?我看官网好像没有。
    makerbi
        16
    makerbi  
       114 天前
    Python 的话 Playwright 就可以,我是和你完全一样的需求,需要渲染 ECharts 图表,部署在阿里云函数,每次调用平均用时 4 秒的样子。
    s2555
        18
    s2555  
       114 天前
    imgkit ,我上个帖子发的字帖生成就用这个,先生成 html ,再转成图片
    hetal
        19
    hetal  
       114 天前
    Oldletter
        20
    Oldletter  
       114 天前
    你的 arm 和 x64 还有问题呢(深度踩坑),应该 arm64 上的 pyppeteer 调用 chrome(开源的那个有问题),我之前写的是 pyppeteer 调用 firefox

    Dockerfile
    ```
    FROM node:16

    # examples: https://github.com/puppeteer/puppeteer/blob/main/docker/Dockerfile

    RUN apt-get update \
    && apt-get install -y wget gnupg firefox-esr fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-khmeros fonts-kacst fonts-freefont-ttf libxss1

    ENV PUPPETEER_PRODUCT=firefox

    WORKDIR /home/app

    COPY ./package.json /home/app
    COPY ./firefox.js /home/app

    RUN npm install
    RUN mkdir screenshots

    CMD echo “Hello World”
    ```
    调用
    ```
    const puppeteer = require('puppeteer-core');
    (async() => {
    const browser = await puppeteer.launch({
    product: 'firefox',
    headless: true,
    executablePath: "/usr/bin/firefox",
    defaultViewport: { width: 1700, height: 800 },
    args: [
    ]
    });

    const page = await browser.newPage();

    await page.goto('https://www.baidu.com/');
    console.log('saving baidu screenshot');
    await page.screenshot({ path: 'screenshots/baidu.png', fullPage: true });

    await browser.close();

    })();
    ```

    环境需要你自己搭建下
    taoya7
        21
    taoya7  
       114 天前
    xcsoft
        22
    xcsoft  
       114 天前
    go 的 chromeDP 也可以
    seeu2ex
        23
    seeu2ex  
       113 天前 via iPhone
    @dudubaba html2canvas 好像清晰度有问题,以前用过,后端不给下载,直接调这个下图片😹
    mikewang
        24
    mikewang  
       113 天前
    以前用过 wkhtmltoimage ,不过现在看起来已经 archive 了
    LuckyLauncher
        25
    LuckyLauncher  
       113 天前
    实际上你的需求是如何在服务器上运行 dom like 的 js
    看上去是 html 其实是 echarts 渲染出来的 canvas/svg
    按道理来讲只要实现了你用到的 js API 然后重新 echarts 的 render 函数是可以直接生成图片的
    不过这种方案比较复杂,好处就是不像浏览器那样占资源
    iv8d
        26
    iv8d  
       113 天前
    生成 pdf 然后截图试试??
    Dongxiaohao
        27
    Dongxiaohao  
       113 天前
    我们用的 puppeteer 这个依赖,很好用。截图效果很好
    zhupeng
        29
    zhupeng  
       113 天前
    自己用过 pyppeteer ,感觉还行,特别的页面会出问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2812 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 11:30 · PVG 19:30 · LAX 03:30 · JFK 06:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.