实现网页截图

[codingMayCry]

求问大佬，有一个需求：

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

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

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

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

[LavaC]

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

[StateMa]

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

[luzemin]

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

[BaymaxK]

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

[iMusic]

@StateMa 我觉得比 html2canvas 好

[Jasonwxy]

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

[CJ2r4u3EH4lrM7aR]

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

[CJ2r4u3EH4lrM7aR]

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

[Kakus]

前段时间刚好写过一个这样的工具，用的这个库：

https://www.npmjs.com/package/capture-website

[imcsk]

用 Chrome 自带的截图行不行

[caesar]

之前开发过一个，也是调用的，不过是生成缩略图的，稍微改下 就可以满足你要求

[Foralrec]

https://github.com/RealAlexandreAI/sticky-hand

[hetal]

https://github.com/hetao29/url2image

[zgsi]

提供一个思路 wkhtmltopdf

[CHTuring]

不要用 html2canvas 各种小问题不断，用 https://www.npmjs.com/package/html-to-image 吧

[ginobefun]

好奇这个需求什么场景用？

[hetal]

@ginobefun 做分享海报等复杂的图片生成

[hazardous]

服务端截图： https://splash.readthedocs.io/

[codingMayCry]

感谢各位大佬的回复，提供了非常多的思路，这边先准备用 Puppeteer 搭一个 nodejs 服务来实现了~

[looo]

Mac Arc 浏览器的内置的截图好用