这是一个创建于 526 天前的主题，其中的信息可能已经有所发展或是发生改变。
求问大佬，有一个需求：
是想实现截图给定的 url 网页，生成截图图片，找了一些资料，也找到了一个能实现效果的网站： https://urlbox.com/
不过这个网站提供的是网页截图 API 服务，试用了一下，推测实现原理是请求对应的 URL ，拿到请求所有的服务器资源，然后在他这个网站的服务器上进行 SSR 后端渲染，生成 HTML ，转成图片。
不过不确定是否实现的主要技术采用的是 SSR(server side rendering)，所以求问大佬有没有懂的呀？
或者实现网页截图有没有更好的思路呢？
 | 1 visper 2024-05-10 09:17:32 +08:00  1 puppeteer |
 | 2 villivateur 2024-05-10 09:17:39 +08:00 他这个需求用一个无头浏览器就能实现，之前我用无头 Chromium 试过。 |
 | 3 juzisang 2024-05-10 09:18:16 +08:00 能跑后端用无头浏览器，puppeteer 之类的。如果纯浏览器环境用 html2canvas |
 | 4 klo424 2024-05-10 09:21:51 +08:00 关键词 html2canvas 。 其实截图实现随便搜都有好多，不知道难在哪？看你的描述，可能是难在搜索？ 另外，这种问题问 gpt 马上就有答案。 |
 | 5 gray0 2024-05-10 09:21:57 +08:00 |
 | 7 codehz 2024-05-10 09:29:03 +08:00 via iPhone 这玩意无论如何都得加钱，不如用 https://developers.cloudflare.com/browser-rendering/ |
 | 8 flyqie 2024-05-10 09:29:57 +08:00 |
 | 9 ik 2024-05-10 09:30:28 +08:00 via iPhone 无头浏览器是可以的 |
 | 10 echoZero 2024-05-10 09:40:03 +08:00 后端用无头试试，我之前试过没问题的 |
 | 11 weeei 2024-05-10 09:51:16 +08:00 1 Firefox: --screenshot [url] Chrome: --headless --screenshot=image.png [url] 都支持知道窗口大小：--window-size=1024,2550 |
 | 12 codingMayCry OP @klo424 html2canvas 不行，主要是网页会有视频，html2canvas 这玩意儿截不到 |
 | 13 zuiyue123 2024-05-10 10:05:00 +08:00 写过这个功能，是通过后台 puppeteer 实现截图的，实现起来很简单 |
 | 14 businessch 2024-05-10 10:07:57 +08:00 via iPhone windows 用 python 搞了个自用，直接调用 edge 无头浏览器，搭建个服务 http 提交 url 返回图片，缺点自用满足 |
 | 15 ahswch 2024-05-10 10:10:06 +08:00 puppeteer 无头浏览器 nodejs 搭一下就行 |
 | 16 4Et5ShxMIq58n6Lr 2024-05-10 10:34:15 +08:00 之前用过 html2canvas 还是有点小瑕疵的，不过大部分场景是 ok 的！ |
 | 17 Sayonaracc 2024-05-10 10:46:32 +08:00 puppeteer 搭配 node 写后台接口，调用的时候传网页地址就可以生成一张图片，注意在服务器上需要配置 chrome 的环境，推荐使用 docker 集成 |
 | 18 royalknight 2024-05-10 10:49:37 +08:00 html2canvas 会有跨域问题，puppeteer 运行资源消耗比较多 |
 | 19 abelmakihara 2024-05-10 11:00:37 +08:00 html2canvas 问题不要太多 svg 的 css 的 各种奇奇怪怪的问题 简单的截个二维码这种是没啥问题 |
 | 20 xiaoqian713 2024-05-10 11:02:45 +08:00 |
 | 21 LavaC 2024-05-10 11:21:24 +08:00 puppeteer 没问题的，我有个几年前写的微博图片接口就是用它写的。 不过要注意的是别用 chromium ，要用 chrome ，否则视频可能解析不出来，字体也得另外配一个防止乱码。 |
 | 22 StateMa 2024-05-10 11:33:45 +08:00 前端我常用的就 domtoimg 这个库，只要有 dom 就能扒 |
 | 24 BaymaxK 2024-05-10 12:10:48 +08:00 2 纯前端截图的话，最好的方法是通过 webrtc 实现。可以看看这个插件： https://www.kaisir.cn/js-screen-shot |
 | 26 Jasonwxy 2024-05-10 12:45:47 +08:00 这个我老早之前用 puppeter 写过一个截图的 node 服务 然后上面说的 html2canvas 前一段时间也用过，感觉样式问题挺多，好多 css 属性不支持... https://html2canvas.hertzen.com/features 下面就有列 Unsupported CSS properties |
| 27 CJ2r4u3EH4lrM7aR 2024-05-10 12:53:55 +08:00 网页截图跨域问题无法解决。因此他们都放到服务端解析。 |
| 28 CJ2r4u3EH4lrM7aR 2024-05-10 12:55:04 +08:00 比如目标网页包含第三方链接，或者包含地图，那你截出来的就是空白。 |
 | 29 Kakus 2024-05-10 13:06:27 +08:00 |
 | 30 imcsk 2024-05-10 13:19:56 +08:00 用 Chrome 自带的截图行不行 |
 | 31 caesar 2024-05-10 13:27:09 +08:00 之前开发过一个，也是调用的，不过是生成缩略图的，稍微改下 就可以满足你要求 |
 | 32 Foralrec 2024-05-10 13:37:41 +08:00 |
 | 33 hetal 2024-05-10 13:39:56 +08:00 |
 | 34 zgsi 2024-05-10 13:42:38 +08:00 提供一个思路 wkhtmltopdf |
 | 35 CHTuring 2024-05-10 13:45:02 +08:00 不要用 html2canvas 各种小问题不断，用 https://www.npmjs.com/package/html-to-image 吧 |
| 36 ginobefun 2024-05-10 13:45:36 +08:00 好奇这个需求什么场景用？ |
 | 38 hazardous 2024-05-10 13:52:18 +08:00 |
| 39 codingMayCry OP 感谢各位大佬的回复，提供了非常多的思路，这边先准备用 Puppeteer 搭一个 nodejs 服务来实现了~ |
 | 40 looo 2024-05-10 14:06:57 +08:00 Mac Arc 浏览器的内置的截图好用 |
 | 41 JRay 2024-05-10 18:16:11 +08:00 我之前是用的浏览器驱动直接访问截图，感觉还好 |
 | 42 gitai 2024-05-11 00:27:35 +08:00 |
 | 43 fionasit007 2024-05-11 10:52:50 +08:00 几年前用过 PhantomJS ，是基于 WebKit ，不过现在貌似已经过时，但是部署起来比较麻烦，使用坑也多；现在选择的话直接自动化无头浏览器一把梭吧 |
 | 44 sead 268 天前 |
Select Language