javascript - HTML5 组件截图

标签 javascript html

我想知道是否有办法在 JavaScript 中截取任何 DOM 元素的屏幕截图并将屏幕截图图像保存到文件中。 (例如用于测试目的......;是的,我知道我可以使用 Selendroid、QF-Test、Sikuli、Sandstorm 和许多其他工具,但我想知道如何用纯 javascript 做到这一点)

我知道,我可以从 Canvas 元素中截取屏幕截图: <canvas /> and print screen/screenshot 甚至截取该网站的完整屏幕截图: Take screenshot of the whole webpage (基于此,应该可以仅对单个/多个组件进行屏幕截图)

但是,有谁知道如何使用 HTML5 中的文件 api 保存这样的元素(保存到用户可以选择的位置)?

最佳答案

Javascript 无法访问浏览器渲染引擎中像素级别的内容。

我认为你唯一的选择就是像 HTML 2 Canvas 这样的工具它用纯 JavaScript 实现了整个浏览器渲染引擎。然后您可以将图像保存在 Canvas 元素中。

HTML 2 Canvas

This script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

(请注意,它可能不是 100% 准确的部分,渲染网页非常复杂)

事实上,您链接到的答案仅与此处相关,因为它链接到一篇文章,其中提到 HTML 2 Canvas 正是出于此目的,截取屏幕截图以流式传输以进行屏幕共享。

关于javascript - HTML5 组件截图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24814807/

相关文章:

javascript - 如何使用innerHTML 在 javascript 中添加 svg html 树?

javascript - CSS 样式在警告消息后消失

html - 让div填满剩余空间

javascript - 当用户手动滚动时如何防止自动滚动?

javascript - 使用 Angular JS 查看模型验证?

javascript - adobe acrobat dc 文档级 javascript

javascript - 具有匿名函数的事件监听器

java - Android 电话.Sms.对话

javascript - 循环导入react中的图像

javascript - 如何只隐藏没有文字的 anchor ?