Web 浏览器的语义截图
Posted
技术标签:
【中文标题】Web 浏览器的语义截图【英文标题】：Semantic Screenshots for Web Browsers 【发布时间】：2017-03-14 20:10:21 【问题描述】：大量现代网络流量（尤其是在社交媒体上）由来自网络浏览器的屏幕截图组成。这些通常包括一些格式化文本、一些布局和一些位图/矢量图形。例如，
截取和分享屏幕截图真的很容易，但它会丢掉很多有用的信息，并且在设备之间不能很好地传输（更不用说更不适合盲人的屏幕阅读器和花哨的数据挖掘） ）。当然，具有讽刺意味的是，html/SVG 是表示此类数据的完美格式，即使它就在那里，我们也没有使用它。
html2canvas 接近于这样做，但不能正确处理图像，请参阅一些半相关的讨论 here。
我的问题是，如何在浏览器中选择一个可见区域并将其保存为一种格式（最好是 HTML），该格式可以保留文本和图像，并在单独呈现时呈现大致相似的内容？ （以便它可以包含为例如用于共享的数据 iframe）。
我知道这通常是不可能的，渲染 HTML 是一项复杂的任务，但我觉得应该可以向浏览器询问“在这些像素坐标内渲染了哪些元素？”。
【问题讨论】：
可能的线索：Tools to selectively copy HTML+CSS+JS.. 感谢@AnkithAmtange 的链接，我看了一下，似乎所有这些工具都只是选择 DOM 元素，所以你必须在此基础上做一些事情才能获得“截图”，但这是一个好的开始。 PhantomJS 可以做到这一点（见phantomjs.org/screen-capture.html）。您必须以某种方式将其包装在扩展中，尽管我认为这样的东西不会很有用。图像在任何设备上都呈现相同的效果，如果您想提取文本，那么 OCR 工具可以轻松完成这项工作。我通过onlineocr.net 运行了您的图片并获得了大部分文字。 @user3608792 ，很好。我想我可以将phantomjs 的pdf 输出转换为svg。我通常会试图告诫你无益地告诉我这个想法不好，但你解决了我的问题，非常感谢。
这似乎与编程无关。也许检查元素并删除所有元素，但突出显示您想要保留的元素。
【参考方案1】：
第一：
右键单击页面，然后单击“将页面另存为”。 使用以.html（或在某些情况下为.webarchive）结尾的名称保存它。看看哪个最适合您。
编辑现在保存的 html 文件以仅包含您想要的部分（您可以使用任何文本编辑器。通常建议使用 Sublime Text 和 Atom）。
那么：
您可以在浏览器中打开它以查看您在做什么。 您可能还想检查 CSS 的来源，并在您的 html 文件夹中获取它，然后将 html 文件链接到它，以保留样式。据我了解，您希望将所有 CSS 内联，或者至少在 html 文件的
<head>部分中，以便您可以将其作为单个文件上传，然后不要'不需要一直将它链接到 CSS 文件。
【讨论】：
如果我写的问题不清楚，我很抱歉，但这根本不是我的意思。 @SeanD 这充分回答了所写的问题。请澄清您认为这如何不能解决您的问题。以上是关于Web 浏览器的语义截图的主要内容，如果未能解决你的问题，请参考以下文章