实现网页截图

[codingMayCry]

求问大佬，有一个需求：

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

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

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

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

[visper]

puppeteer

[villivateur]

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

[juzisang]

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

[klo424]

关键词 html2canvas 。

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

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

[gray0]

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

[gray0]

@gray0 一个 api 搞定

[codehz]

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

[flyqie]

@klo424 #4

截图方案确实挺多。

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

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

[ik]

无头浏览器是可以的

[echoZero]

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

[weeei]

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

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

[codingMayCry]

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

[zuiyue123]

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

[businessch]

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

[ahswch]

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

[laobobo]

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

[Sayonaracc]

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

[royalknight]

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

[abelmakihara]

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

[xiaoqian713]

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

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