推荐学习书目
› 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 · Sep 4, 2024 · 8176 views
    This topic created in 791 days ago, the information mentioned may be changed or developed.

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

    Supplement 1  ·  Sep 4, 2024
    因为项目使用的 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 replies  •  2024-09-05 16:52:59 +08:00
    tool2dx
    tool2dx
    Sep 4, 2024
    1
    无头调用 chrome 的内置 api 截图功能,echarts 强依赖 js 运行期,又没办法直接解析文件的。

    有个叫 devtools-protocol 协议,可以通过 websocket 发送控制命令,并下载 jpeg 截图。
    wangbin526
    wangbin526
    Sep 4, 2024 via Android❤️1
    2
    偶是用 go 动态生成 html 的 echart 然后转图片再插入 pdf ,用的是 docker 的 lampnick/doctron ,实测 arm 能用,一秒三五张连续转了几万张也没出问题
    Gilfoylek
    Gilfoylek
    Sep 4, 2024
    3
    刚做过类似功能 [chromedp]( https://pkg.go.dev/github.com/chromedp/chromedp) 我们用的是 golang 的包
    money1991
    money1991
    Sep 4, 2024
    4
    docker 里跑 Puppeteer ,它有转图片 api ,非常方便
    PolarBears
    PolarBears
    Sep 4, 2024
    5
    playwright
    dudubaba
    dudubaba
    Sep 4, 2024
    6
    一般都是 html 转 canvas 转图片,或者转 pdf 再拆分图片,都有现成的库吧。
    xiaoriri666
    xiaoriri666
    Sep 4, 2024
    7
    直接用 serverless ,阿里云直接部署个,就是冷启动有点慢,如果量不是很大可以用
    arthurblake
    arthurblake
    Sep 4, 2024
    8
    python 之 selenium ,我现在就用这个定时发送图表
    moxiaonai
    moxiaonai
    Sep 4, 2024
    9
    playwright, puppeteer 之类的,缺点是内存占用有点大,qps 大的话,服务容易崩
    AlanBrian
    AlanBrian
    OP
    Sep 4, 2024
    10
    因为程序使用的 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
    tool2dx
    Sep 4, 2024
    11
    @AlanBrian https://github.com/ChromeDevTools/awesome-chrome-devtools

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

    })();
    ```

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