实现网页截图

2024-05-10 09:15:07 +08:00
 codingMayCry

求问大佬,有一个需求:

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

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

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

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

5128 次点击
所在节点    程序员
44 条回复
visper
2024-05-10 09:17:32 +08:00
puppeteer
villivateur
2024-05-10 09:17:39 +08:00
他这个需求用一个无头浏览器就能实现,之前我用无头 Chromium 试过。
juzisang
2024-05-10 09:18:16 +08:00
能跑后端用无头浏览器,puppeteer 之类的。如果纯浏览器环境用 html2canvas
klo424
2024-05-10 09:21:51 +08:00
关键词 html2canvas 。

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

另外,这种问题问 gpt 马上就有答案。
gray0
2024-05-10 09:21:57 +08:00
gray0
2024-05-10 09:22:33 +08:00
@gray0 一个 api 搞定
codehz
2024-05-10 09:29:03 +08:00
这玩意无论如何都得加钱,不如用 https://developers.cloudflare.com/browser-rendering/
flyqie
2024-05-10 09:29:57 +08:00
@klo424 #4

截图方案确实挺多。

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

记得之前还用类似这种网站玩了点花活。。无头真的每家配的都不一样。
ik
2024-05-10 09:30:28 +08:00
无头浏览器是可以的
echoZero
2024-05-10 09:40:03 +08:00
后端用无头试试,我之前试过没问题的
weeei
2024-05-10 09:51:16 +08:00
Firefox: --screenshot [url]
Chrome: --headless --screenshot=image.png [url]

都支持知道窗口大小:--window-size=1024,2550
codingMayCry
2024-05-10 09:54:25 +08:00
@klo424 html2canvas 不行,主要是网页会有视频,html2canvas 这玩意儿截不到
zuiyue123
2024-05-10 10:05:00 +08:00
写过这个功能,是通过后台 puppeteer 实现截图的,实现起来很简单
businessch
2024-05-10 10:07:57 +08:00
windows 用 python 搞了个自用,直接调用 edge 无头浏览器,搭建个服务 http 提交 url 返回图片,缺点自用满足
ahswch
2024-05-10 10:10:06 +08:00
puppeteer 无头浏览器 nodejs 搭一下就行
4Et5ShxMIq58n6Lr
2024-05-10 10:34:15 +08:00
之前用过 html2canvas 还是有点小瑕疵的,不过大部分场景是 ok 的!
Sayonaracc
2024-05-10 10:46:32 +08:00
puppeteer 搭配 node 写后台接口,调用的时候传网页地址就可以生成一张图片,注意在服务器上需要配置 chrome 的环境,推荐使用 docker 集成
royalknight
2024-05-10 10:49:37 +08:00
html2canvas 会有跨域问题,puppeteer 运行资源消耗比较多
abelmakihara
2024-05-10 11:00:37 +08:00
html2canvas 问题不要太多 svg 的 css 的 各种奇奇怪怪的问题
简单的截个二维码这种是没啥问题
xiaoqian713
2024-05-10 11:02:45 +08:00

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/1039312

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX