如何使图像内的文本可选？ [关闭]答案

【问题标题】：How to make text inside of the an image selectable? [closed]如何使图像内的文本可选？ [关闭]
【发布时间】：2016-05-08 09:40:38
【问题描述】：

我有几张 JPG 图片，它们都包含一些文字（它们是一些漫画的页面）。我想让文本可选择（最终是可复制的），但我唯一的想法是来自 SVG 的 <text> 标签，但即使我将不透明度设为 0.0，该解决方案也可能非常混乱，基本上呈现 SVG @ 987654322@不可见，仅在选中时可见，但只有一个错误（字体，放置等）足以使其混乱和荒谬。

对于这个问题，是否有更优雅（且不那么混乱）的解决方案？如果您有一点想法，请分享，它会很棒。这个问题我坚持了好几个星期。

【问题讨论】：

无法选择图像中的文本。您的意思是覆盖在图像顶部的文本，例如位于` 上方的<div>？
不，我在图像上放置了一个
无论您使用哪种方法，都需要定位文本。 SVG 的优势在于它可以缩放，这将是您的赢家，并且始终将文本保持在位置，大小独立，......如果您想要一个可见的选择，所有这一切，如果没有，那么您有两个答案，选择最适合的一个。

标签： javascript jquery css image svg

【解决方案1】：

这是一个便宜又快捷的建议 - 将要复制的文本复制到图像标题或 alt 属性中。

然后，在图像上单击（或 dblclick），您可以从 title/alt 属性中检索文本并将其复制到剪贴板。

这不是很好，但会起作用......

【讨论】：

【解决方案2】：

让它看起来和感觉真实的唯一方法是使用 HTML 元素中的实际文本。遗憾的是，这意味着从实际图像中删除文本，然后找到足够相似的字体，最后编写和定位文本。

另一个想法是将文本分配给每个图像，当您单击图像时，您会在剪贴板中复制其文本（如果复制是这里的主要意图）。

【讨论】：

那将是完美的。可能为一个区域分配文本？如果是，请告诉我怎么做，因为我找不到任何可靠的方法。
您始终可以使用自定义 HTML 属性并用几乎您想要的内容填充它们。不确定您从哪里获取图像，但您可以制作字典之类的东西，例如 {"image_one.jpg": "The text for the first image", "image_two.jpg": "The other text", etc}
从一个xml文件中，当一个区域（例如：一个气球）和对应的文本有相同的id，所以它看起来像这样 {id1: "id1", id2: "id2"现在问题出在剪贴板，但你帮了很多忙，我觉得我在圈子里跑。可能的答案：stackoverflow.com/questions/22581345/… 再次非常感谢
干杯，伙计。我很高兴能帮上忙。