html - Web浏览器的语义截图

大量现代网络流量（特别是在社交媒体上）包含来自网络浏览器的屏幕截图。这些通常包括一些格式化文本，一些布局和一些位图/矢量图形。如，

它很容易拍摄并分享屏幕截图，但它丢弃了许多有用的信息，并且在设备之间无法很好地传输（更不用说对屏幕阅读器之类的东西不太适合了盲目和花哨的数据挖掘）。当然，具有讽刺意味的是，HTML / SVG是表示此类数据的完美格式，即使它就在那里，我们也不会使用它。

html2canvas接近这样做，但没有正确处理图片，请参阅一些半相关的讨论here。

我的问题是，如何在浏览器中选择一个可见区域并将其保存为保留文本和图像的格式（理想情况下为HTML），并在单独渲染时呈现大致相似的内容？（以便可以将其包括在内，例如用于共享的数据iframe）。

我知道这通常是不可能的，并且渲染HTML是一项复杂的任务，但我觉得应该可以向浏览器询问类似于什么元素在这些像素坐标中呈现的内容？＆＃34;

第一：

右键单击页面，然后单击＆＃34;将页面另存为＆＃34;。

使用以.html结尾的名称（或某些情况下为.webarchive）保存。查看哪种方式最适合您。

编辑现在保存的html文件，只包含你想要的部分（你可以使用任何文本编辑器。通常建议使用Sublime Text和Atom）。

然后：

您可以在浏览器中打开它，看看您的目标是什么。

您可能也想检查CSS的来源，并在html的文件夹中获取，然后将html文件链接到它，以便保留样式。

据我了解，您希望将所有CSS内联，或者至少在html文件的<head>部分中，这样您就可以将其作为单个文件上传文件，并且不需要继续将其链接到CSS文件。

第一：