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

Question

我将不可见的文本叠加在图像之上。是否有 jQuery 插件（或类似插件）允许用户选择图像上的区域（也选择覆盖的文本）并能够复制内容。

现在，我已将每个字符放入其自己的 标记中。问题是当用户选择时，它有时会选择所有覆盖的文本（除非用户使用鼠标非常精确），有时图像本身也会被选中，等等。

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

Answer 1

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

如果您对元素进行绝对定位，则可以检测 mousedown、mousemove 和 mouseup，找出跨度元素 mouse结束（或最接近），并用这两个元素之间的所有内容填充文本区域。如果您只想使用单词粒度，我怀疑有人会抱怨（用跨度包围每个单词，而不是每个字母）。

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

在 jsfiddle 上查看。

您可能想要添加的功能：

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

Answer 2

这是一个使用我对上一个问题的回答的简单示例： http:// /www.jsfiddle.net/yijian/83​​W7X/2/embedded/result

var selected = [];

function drawSelection(){
    if(selected.length){
        selected.sort(function(a, b){
            if(a.sourceIndex){
                return a.sourceIndex - b.sourceIndex;
            } else if(a.compareDocumentPosition){
                if(a.compareDocumentPosition(b) == Node.DOCUMENT_POSITION_PRECEDING){
                    return 1;
                } else {
                    return -1;
                }
            }
        });
        var range = rangy.createRange(),
            sel = rangy.getSelection();

        range.setStart(selected[0].children[0], 0);
        range.setEnd(selected[selected.length - 1].children[0], 1);
        sel.setSingleRange(range);
    }
}

$('ul').selectable({
    delay: 100,
    selecting: function(event, ui) {
        if(ui.selecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.selecting, selected) === -1) {
            selected.push(ui.selecting);
            drawSelection();
        }
    },
    unselecting: function(event, ui){
        if(ui.unselecting.getAttribute('class').indexOf('wrapper') !== -1 && $.inArray(ui.unselecting, selected) > -1){
            selected.splice($.inArray(ui.unselecting, selected), 1);
            drawSelection();
        }
    }
});

它将 jQuery UI 的 Selectable 与 Tim Down 优秀的 Rangy 库混合在一起，创建与您要求的类似的东西。我认为。你问的不是很清楚。

该代码保留当前选定的 li 元素的数组。代码的第二部分添加了相关的事件处理程序和选项。每次选择或取消选择元素时都会调用drawSelection函数。该函数首先按 DOM 中的位置对所有元素进行排序，然后继续从第一个选定的 li 到最后一个选定的内容进行选择。

代码，例如 theazureshadow 的< /a> 只是概念验证，因为我正在抽象实际上应该是为相当重的 Rangy 库选择 li 的简单任务。它的性能也不是很好，需要进行一些重构。