Question

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

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

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

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

所以问题是：如何让我的画布表现为具有alt属性的图像，以便用户可以将它们复制为正常字符？

JsFiddle example

<img alt="...">

谢谢！

更新

我已经写了几个测试：

div with canvas + absolutely positioned img

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

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

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

Answer 1

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

来自＆＃34; MDN - Basic Usage of canvas＆＃34;：

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

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

你可以做什么，如果你只在画布上画一次，如果这些图画中没有交叉原点（即外部图像），就是创建新的{{1}将<img>设置为src的标记，并为其指定alt属性。

canvas.toDataURL()

或者，对于您的特定情况，您还可以附加var img = new Image(); img.onload = function(){ canvas.parentNode.replaceChild(this, canvas); this.alt = 'your alt content'; } img.src = canvas.toDataURL();元素，其不透明度设置为0，其高度/宽度设置为1px并绝对定位。

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

＆＃13;

<span>

＆＃13;

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
}

＆＃13;

Answer 2

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

.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>

添加＆＃34; alt＆＃34;内容到画布

更新

2 个答案: