【发布时间】：2017-03-14 20:10:21
【问题描述】：
大量现代网络流量（尤其是在社交媒体上）由来自网络浏览器的屏幕截图组成。这些通常包括一些格式化文本、一些布局和一些位图/矢量图形。例如，
截取和分享屏幕截图真的很容易，但它会丢掉很多有用的信息，并且在设备之间不能很好地传输（更不用说更不适合盲人的屏幕阅读器和花哨的数据挖掘） ）。当然，具有讽刺意味的是，HTML/SVG 是表示此类数据的完美格式，即使它就在那里，我们也没有使用它。
html2canvas 接近于这样做，但不能正确处理图像，请参阅一些半相关的讨论 here。
我的问题是，如何在浏览器中选择一个可见区域并将其保存为一种格式（最好是 HTML），该格式可以保留文本和图像，并在单独呈现时呈现大致相似的内容？ （以便它可以包含为例如用于共享的数据 iframe）。
我知道这通常是不可能的，渲染 HTML 是一项复杂的任务，但我觉得应该可以向浏览器询问“在这些像素坐标内渲染了哪些元素？”。
【问题讨论】：
-
感谢@AnkithAmtange 的链接，我看了一下，似乎所有这些工具都只是选择 DOM 元素，所以你必须在此基础上做一些事情才能获得“截图”，但这是一个好的开始。
-
PhantomJS 可以做到这一点（见phantomjs.org/screen-capture.html）。您必须以某种方式将其包装在扩展中，尽管我认为这样的东西不会很有用。图像在任何设备上都呈现相同的效果，如果您想提取文本，那么 OCR 工具可以轻松完成这项工作。我通过onlineocr.net 运行了您的图片并获得了大部分文字。
-
@user3608792 ，很好。我想我可以将
phantomjs的pdf 输出转换为svg。我通常会试图告诫你无益地告诉我这个想法不好，但你解决了我的问题，非常感谢。 -
这似乎与编程无关。也许检查元素并删除所有元素，但突出显示您想要保留的元素。
标签： html canvas svg screenshot semantic-markup