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

Posted 2023-03-05

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

【英文标题】：jQuery - select invisible text overlaid on image, ala GMail PDF viewer

【发布时间】：2011-05-07 00:51:49

【问题描述】：

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

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

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

【问题讨论】：

“隐形”是什么意思？是不显示，前景色=背景色，可见假吗？有一个 jquery 图像裁剪插件，可以让你在图像上选择一个区域，但你必须编写一些文本部分。

【参考方案1】：

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

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

编辑：昨晚我有点好奇，编写了一个非常幼稚的版本。它只支持mousedown 和mouseup，它在 IE 中不起作用（我不想调试它：）

Check it out on jsfiddle.

您可能想要添加的功能：

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

【讨论】：

@hookd 谢谢！它有点让我着迷，至少是为了快速的概念验证。

【参考方案2】：

这是一个简单的例子，使用我对您之前问题的回答：http://www.jsfiddle.net/yijiang/83W7X/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's，仅是概念验证，因为我将选择lis 的简单任务抽象为相当繁重的Rangy 库。它的性能也不是很好，可以进行一些重构。