实现网页截图

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 910 days ago, the information mentioned may be changed or developed.

求问大佬，有一个需求：

是想实现截图给定的 url 网页，生成截图图片，找了一些资料，也找到了一个能实现效果的网站： https://urlbox.com/

不过这个网站提供的是网页截图 API 服务，试用了一下，推测实现原理是请求对应的 URL ，拿到请求所有的服务器资源，然后在他这个网站的服务器上进行 SSR 后端渲染，生成 HTML ，转成图片。

不过不确定是否实现的主要技术采用的是 SSR(server side rendering)，所以求问大佬有没有懂的呀？

或者实现网页截图有没有更好的思路呢？

截图

ssr

API

44 replies • 2025-01-23 14:26:40 +08:00

visper

May 10, 2024

puppeteer

DawnMoon

May 10, 2024

他这个需求用一个无头浏览器就能实现，之前我用无头 Chromium 试过。

juzisang

May 10, 2024

能跑后端用无头浏览器，puppeteer 之类的。如果纯浏览器环境用 html2canvas

v2er4241

May 10, 2024

关键词 html2canvas 。

其实截图实现随便搜都有好多，不知道难在哪？看你的描述，可能是难在搜索？

另外，这种问题问 gpt 马上就有答案。

gray0

May 10, 2024

https://playwright.dev/python/docs/api/class-page#page-screenshot

gray0

May 10, 2024

@gray0 一个 api 搞定

codehz

May 10, 2024 via iPhone

这玩意无论如何都得加钱，不如用 https://developers.cloudflare.com/browser-rendering/

flyqie

May 10, 2024

@klo424 #4

截图方案确实挺多。

前端做的话 html2canvas ，后端做的话上无头浏览器。

记得之前还用类似这种网站玩了点花活。。无头真的每家配的都不一样。

May 10, 2024 via iPhone

无头浏览器是可以的

echoZero

May 10, 2024

后端用无头试试，我之前试过没问题的

weeei

May 10, 2024

Firefox: --screenshot [url]
Chrome: --headless --screenshot=image.png [url]

都支持知道窗口大小：--window-size=1024,2550

codingMayCry

May 10, 2024

@klo424 html2canvas 不行，主要是网页会有视频，html2canvas 这玩意儿截不到

zuiyue123

May 10, 2024

写过这个功能，是通过后台 puppeteer 实现截图的，实现起来很简单

businessch

May 10, 2024 via iPhone

windows 用 python 搞了个自用，直接调用 edge 无头浏览器，搭建个服务 http 提交 url 返回图片，缺点自用满足

889434

May 10, 2024

puppeteer 无头浏览器 nodejs 搭一下就行

4Et5ShxMIq58n6Lr

May 10, 2024

之前用过 html2canvas 还是有点小瑕疵的，不过大部分场景是 ok 的！

Sayonaracc

May 10, 2024

puppeteer 搭配 node 写后台接口，调用的时候传网页地址就可以生成一张图片，注意在服务器上需要配置 chrome 的环境，推荐使用 docker 集成

royalknight

May 10, 2024

html2canvas 会有跨域问题，puppeteer 运行资源消耗比较多

BornThisWay

May 10, 2024

html2canvas 问题不要太多 svg 的 css 的各种奇奇怪怪的问题
简单的截个二维码这种是没啥问题

xiaoqian713

May 10, 2024

https://github.com/xiaoshame/script/blob/main/push_to_xiaohongshu/app.py

无头 Chromium 实现的，可以参考下

LavaC

May 10, 2024

puppeteer 没问题的，我有个几年前写的微博图片接口就是用它写的。
不过要注意的是别用 chromium ，要用 chrome ，否则视频可能解析不出来，字体也得另外配一个防止乱码。

StateMa

May 10, 2024

前端我常用的就 domtoimg 这个库，只要有 dom 就能扒

luzemin

May 10, 2024

@weeei 试了下 Chrome headless 命令无法截取 full page

MagicCoder

May 10, 2024

纯前端截图的话，最好的方法是通过 webrtc 实现。可以看看这个插件： https://www.kaisir.cn/js-screen-shot

MzM2ODkx

May 10, 2024

@StateMa 我觉得比 html2canvas 好

Jasonwxy

May 10, 2024

这个我老早之前用 puppeter 写过一个截图的 node 服务
然后上面说的 html2canvas 前一段时间也用过，感觉样式问题挺多，好多 css 属性不支持...
https://html2canvas.hertzen.com/features 下面就有列 Unsupported CSS properties

CJ2r4u3EH4lrM7aR

May 10, 2024

网页截图跨域问题无法解决。因此他们都放到服务端解析。

CJ2r4u3EH4lrM7aR

May 10, 2024

比如目标网页包含第三方链接，或者包含地图，那你截出来的就是空白。