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

因为项目使用的 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 得知），截屏应该也不需要音频吧？有知道的大佬帮忙解个疑惑，感激不尽。

最后感谢各位的建议🙏

HTML

echarts

图片

29 条回复 • 2024-09-05 16:52:59 +08:00

tool2dx

2024-09-04 10:30:31 +08:00

无头调用 chrome 的内置 api 截图功能，echarts 强依赖 js 运行期，又没办法直接解析文件的。

有个叫 devtools-protocol 协议，可以通过 websocket 发送控制命令，并下载 jpeg 截图。

wangbin526

2024-09-04 10:35:14 +08:00 via Android

偶是用 go 动态生成 html 的 echart 然后转图片再插入 pdf ，用的是 docker 的 lampnick/doctron ，实测 arm 能用，一秒三五张连续转了几万张也没出问题

Gilfoylek

2024-09-04 10:37:46 +08:00

刚做过类似功能 [chromedp]( https://pkg.go.dev/github.com/chromedp/chromedp) 我们用的是 golang 的包

money1991

2024-09-04 10:38:32 +08:00

docker 里跑 Puppeteer ，它有转图片 api ，非常方便

PolarBears

2024-09-04 10:39:49 +08:00

playwright

dudubaba

2024-09-04 10:51:13 +08:00

一般都是 html 转 canvas 转图片，或者转 pdf 再拆分图片，都有现成的库吧。

xiaoriri666

2024-09-04 10:55:51 +08:00

直接用 serverless ，阿里云直接部署个，就是冷启动有点慢，如果量不是很大可以用

arthurblake

2024-09-04 11:06:12 +08:00

python 之 selenium ，我现在就用这个定时发送图表

moxiaonai

2024-09-04 11:08:15 +08:00

playwright, puppeteer 之类的，缺点是内存占用有点大，qps 大的话，服务容易崩

AlanBrian

2024-09-04 11:12:36 +08:00

因为程序使用的 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

2024-09-04 11:19:25 +08:00

@AlanBrian https://github.com/ChromeDevTools/awesome-chrome-devtools

我是抓页面数据没办法，要用到 websocket 的 devtools 协议。一般截图用 api 就够了，不用上这个协议的。

daxin945

2024-09-04 11:24:13 +08:00

selenium + firefox 无头浏览器部署在 arm 架构的国产化操作系统上跑过

horizon

2024-09-04 11:27:32 +08:00

@wangbin526 #2
清晰度有问题没

kenilalexandra

2024-09-04 11:38:32 +08:00

屏幕截图不行？

AlanBrian

2024-09-04 11:56:58 +08:00

@daxin945 请问下 arm 架构的 firefox 浏览器在哪下载呢？我看官网好像没有。

makerbi

2024-09-04 12:19:46 +08:00

Python 的话 Playwright 就可以，我是和你完全一样的需求，需要渲染 ECharts 图表，部署在阿里云函数，每次调用平均用时 4 秒的样子。

daxin945

2024-09-04 13:53:04 +08:00

@AlanBrian #15 https://github.com/mozilla/geckodriver/releases

s2555

2024-09-04 14:31:53 +08:00

imgkit ，我上个帖子发的字帖生成就用这个，先生成 html ，再转成图片

hetal

2024-09-04 14:45:22 +08:00

https://github.com/hetao29/url2image

Oldletter

2024-09-04 15:20:18 +08:00

你的 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();

})();
```

环境需要你自己搭建下

YH0Y9W0Eyg9LR683

2024-09-04 15:25:18 +08:00

satori

https://github.com/vercel/satori

xcsoft

2024-09-04 15:33:39 +08:00

go 的 chromeDP 也可以

seeu2ex

2024-09-04 22:14:44 +08:00 via iPhone

@dudubaba html2canvas 好像清晰度有问题，以前用过，后端不给下载，直接调这个下图片😹

mikewang

2024-09-05 00:40:53 +08:00

以前用过 wkhtmltoimage ，不过现在看起来已经 archive 了

LuckyLauncher

2024-09-05 08:46:00 +08:00

实际上你的需求是如何在服务器上运行 dom like 的 js
看上去是 html 其实是 echarts 渲染出来的 canvas/svg
按道理来讲只要实现了你用到的 js API 然后重新 echarts 的 render 函数是可以直接生成图片的
不过这种方案比较复杂，好处就是不像浏览器那样占资源

iv8d

2024-09-05 10:34:28 +08:00

生成 pdf 然后截图试试？？

Dongxiaohao

2024-09-05 10:44:28 +08:00

我们用的 puppeteer 这个依赖，很好用。截图效果很好

Latin

2024-09-05 12:07:27 +08:00

https://www.drissionpage.cn/ChromiumPage/screen/#%EF%B8%8F%EF%B8%8F-%E9%A1%B5%E9%9D%A2%E6%88%AA%E5%9B%BE

zhupeng

2024-09-05 16:52:59 +08:00

自己用过 pyppeteer ，感觉还行，特别的页面会出问题。