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