javascript - jQuery - 选择覆盖在图像上的不可见文本，ala GMail PDF 查看器

Question

我在图像上叠加了不可见的文本。是否有 jQuery 插件(或类似插件)允许用户在图像上选择一个区域(同时选择覆盖文本)并能够复制内容。

现在，我已将每个字符放在自己的 <span /> 中标签。问题是当用户选择时，它有时会选择所有覆盖的文本(除非用户使用他/她的鼠标非常精确)，有时图像本身会被选中，等等。

类似于 GMail 的 PDF 查看器的解决方案会很好。有什么建议吗？

Answer 1

Google 似乎从 pdf 中知道文件中各种 x,y 文本偏移量的位置。当您选择一堆行时，它会在“文本”所在的图像上放置一组绝对定位的“选择”div(它们具有 highlight-pane 类)。当您选择文本时，它会用您选择的内容填充到 #selection-content 文本区域，并选择其中的文本(尝试使用 window.getSelection().anchorNode 在 Chrome 中，例如)。除了这些选择覆盖之外，只有一个图像 .page-image。我敢打赌他们实际上使用窗口来捕获他们关心的所有鼠标手势(我假设 mousedown 和 mouseup)。 ( Here's an example pdf document )

如果你对元素进行绝对定位，你可以检测到 mousedown、mousemove 和 mouseup，找出 span 元素鼠标是超过(或最接近)，并用这两个元素之间的所有内容填充文本区域。如果您只想使用单词粒度，我怀疑有人会提示(用跨度包围每个单词，而不是每个字母)。

编辑:昨晚我有点好奇，编写了一个真的天真的版本。它只执行 mousedown 和 mouseup，并且在 IE 中不起作用(我不想调试它:)

Check it out on jsfiddle.

您可能想要添加的功能:

1. 检查基于位置的匹配的一些更好的方法；我只看它是否包含在包装盒中。
2. mousemove 动态更新
3. 基于行而不是基于跨度
4. 您仍然可以通过背景颜色进行选择，但根据元素的排列方式，它可能看起来不太好。还需要支持透明度。