网页DOM捕获截图
介绍
使用SnapDOM实现的网页DOM捕获截图脚本,仓库地址。
@zumer/snapdom: SnapDOM captures HTML elements to images with exceptional speed and accuracy, supporting pseudo-elements, shadow DOM, web fonts, and more.
本脚本功能只有一个,点击菜单/快捷键开启选择页面元素功能,再次点击即可将该元素内容下载为图片。
为了避免污染页面,本脚本不会在页面中插入任何元素。事件监听仅在开启时添加,完成/关闭后移除。
使用说明
开启功能
开启后可在网页上选择DOM元素,再次点击即可下载其内容
- 点击油猴脚本,再点击本脚本菜单
- 网页中鼠标右键也可以在油猴脚本的二级菜单中找到本脚本
- 快捷键开启:Ctrl+Shift+,
关闭功能
取消进行中的选取并关闭功能
问题
不同于普通截图,@zumer/snapdom
需要解析网页上的DOM元素及样式,内容越复杂耗时越长。
默认背景色为白色(#fff
),当实际背景色源于目标元素的上级元素时,会出现下载后背景色不对的情况。
例如:网页body上设置了黑色背景色,选择段落元素下载后,发现背景色变成白色。
考虑在本脚本后续版本中新增选择配置及预览功能。
放弃添加配置及预览功能,保持简洁,选中截图即可。补充了一个递归获取目标元素“实际”背景色的功能
@zumer/snapdom
插件内部缓存了已捕获元素的样式。后续截取包含已缓存元素时,可能会出现样式不对的情况(如:主题更换、明暗模式更换等原因导致的样式更新)。
直接选择图片时,可能会因跨域问题导致下载失败
亲测(v1.9.7
),偶尔会出现一直在解析或解析失败的情况,未提供中断解析的方法
TODO List
- [x] 快捷键启动
- [x] 修复背景色丢失bug
- [ ] 超时中断解析
反馈
欢迎反馈,或者提交PR。