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

Question

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

现在,我已将每个角色放在自己的<span />标签中.问题是当用户选择时,它有时会选择所有重叠的文本(除非用户对他/她的鼠标非常精确),有时图像本身会被选中等等.

类似于GMail的PDF查看器的解决方案会很好.建议？

Answer 1

谷歌似乎从pdf知道x,y文件中的各种文本偏移量.当你选择一堆线时,它会在"text"所在的图像上放置一组绝对定位的"选择"div(它们有类highlight-pane).当您选择文本时,它会使用您选择的内容填充#selection-content文本区域,并选择其中的文本(window.getSelection().anchorNode例如,尝试在Chrome中使用).除了那些选择叠加,还有一个图像.page-image.我打赌他们实际上使用窗口来捕捉他们关心的所有鼠标手势(我假设mousedown和mouseup).(这是一个示例pdf文档)

如果你是绝对定位元素,你可以检测mousedown,mousemove并mouseup找出鼠标在(或最接近)的跨度元素,并用这两个元素之间的所有内容的内容填充textarea.如果你只想使用单词粒度,我怀疑有人会抱怨(用一个跨度而不是每个字母围绕每个单词).

编辑:我昨晚有点好奇并编写了一个非常天真的版本.它只做mousedown和mouseup,它在IE中不起作用(我不想调试它:)

在jsfiddle上查看.

您可能想要添加的功能:

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