将 "alt" 内容添加到 canvas

Question

我正在编写一个在 canvases 中嵌入文本的程序，每个 canvas 包含一个将被动画化的字符（汉字），一次绘制一个笔划。

到目前为止我遇到了一些问题：

用户不能 select canvases。
用户不能复制文字，因为没有文字，只有图片。

我可能已经通过在 <canvas> 标签内插入文本来解决第二个问题（尽管我无法检查它是否有效，因为我不能 select canvases 复制内容）；但是我不知道如何解决第一个问题。

所以问题是：如何让我的 canvases 表现得像具有 alt 属性的图像，以便用户可以像复制普通字符一样复制它们？

JsFiddle example 与 <img alt="...">

谢谢！

更新

我又写了几个测试：

div with canvas + absolutely positioned img

问题： 在 div 元素之间添加空格（在 Firefox 上测试），selection 有时会闪烁。
canvas + partially hidden span

问题： selection 完全隐藏了 canvas.

我也尝试过使用标签，但问题更多，而且没有明显优势。

Answer 1

canvas 元素没有这样的 alt 属性。

来自“MDN - Basic Usage of canvas”：

At first sight a <canvas> looks like the <img> element, with the only clear difference being that it doesn't have the src and alt attributes.

此外，canvas 的 innerHTML 只能由不支持 <canvas> 元素的浏览器访问。

但是，如果您只在 canvas 上绘制一次并且这些绘图中不涉及跨源（即外部图像），您可以做什么, 是创建新的 <img> 标签，并将其 src 设置为 canvas.toDataURL()，并为其分配一个 alt 属性。

var img = new Image();
img.onload = function(){
  canvas.parentNode.replaceChild(this, canvas);
  this.alt = 'your alt content';
  }
img.src = canvas.toDataURL();

或者，对于您的特定情况，您还可以附加一个 <span> 元素，其不透明度设置为 0 ，其 height/width 为 1px 并绝对定位。

它不应该是可见的，但您可以复制粘贴其内容。

body {
  font-size: 14px;
}
img {
  display: inline-block;
  vertical-align: baseline;
  cursor: text;
  height: 1em;
}
.canvas_alt {
  position: absolute;
  max-height: 1px;
  max-width: 1px;
  opacity: 0
}
canvas {
  border: 1px solid
}

Copy the images as if text:
<br />
<br />X<canvas height="50" width="50"></canvas><span class="canvas_alt">alt text</span>Y
<br />
<br />Try pasting it here, is should be 'XiiY':
<br />
<input />

Answer 2

也可以通过将不透明度为 0 的图像放在 canvas 元素的顶部来“破解”它，具有相同的高度和宽度，都定位为绝对。

.myParentElem{
    position: relative;
    display: block;
}
.myCanvas{
    position: absolute;
    top: 0px;
    left: 0px;
}
.myImg{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

<div class="myParentElem>
  <canvas class="myCanvas">
  <img class="myImg" alt="my alt text">
</div>

将 "alt" 内容添加到 canvas

Adding "alt" content to canvas

html

canvas

selection

copy-paste

更新