将“alt”内容添加到画布

Question

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

到目前为止，我遇到了几个问题：

1. 用户无法选择画布。
2. 使用不能复制文本，因为没有文本，只有图像。

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

所以问题是：如何让我的画布表现为具有alt属性的图像，以便用户可以像普通角色一样复制它们？

例如的jsfiddle用<img alt="...">

谢谢！

更新

我又写了几个测试：

• divwith canvas+ 绝对定位img

  问题：在div元素之间添加空格（在 Firefox 上测试），选择有时会闪烁。

• canvas + 部分隐藏 span

  问题：选择完全隐藏画布。

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

Answer 1

altcanvas 元素没有这样的属性。

来自“ MDN - 画布的基本用法”：

乍一看 a<canvas>看起来像<img>元素，唯一明显的区别是它没有 src 和 alt 属性。

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

但是，如果您只在画布上绘制一次并且这些绘图（即外部图像）中没有涉及跨源，那么您可以做的是创建新<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 ，其高度/宽度为 1px 并绝对定位。

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

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

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
}