HTML5 canvas元素的访问值

Question

我是HTML5的新手。

使用典型元素和jQuery之类的东西，我通常能够使用

访问它的值

$("#elem").val();

编辑： 说我在canvas元素中写"abcd" ..我希望能够在某个数据库中“存储”“abcd”......

如果它是纯文本，我将使用jquery访问它，但是使用绘图我不确定它是如何工作的？

如何用canvas元素实现相同的结果？我可以期待什么格式的结果？我是否必须获得所有x，y坐标的数组并解析一些如何？我得到一张图片吗？

感谢您的帮助！

Answer 1

您可以使用getImageData()方法。这将返回ImageData个对象。 ImageData包含width属性，height属性和CanvasPixelArray对象，本质上是位图。 ImageData可能对将数据加载回画布（使用putImageData()方法）非常有用，但如果您愿意，也可以检查像素数组的原始数据。

You can read more about ImageData here.

And you can read about canvas pixel manipulation here.

---

似乎我可能误解了你的问题。如果通过在数据库中存储“abcd”，您希望存储位图图像，那么您只需要提取像素数据，然后将其存储为BLOB或类似对象。这就是我的意思。

但是，如果您希望在数据库中存储实际文本“abcd”，那么您将面临更加困难的时间。您需要将canvas视为文字画布。一旦你把东西放在上面，它就会成为图像的一部分。它不像SVG那样可以再次提取特定组件。 Canvas本质上是一个位图图像，因此如果您希望从中提取文本数据而无需访问设计算法，则必须使用某种OCR算法（这当然是非常不可取的）。

如果您确实希望提取文本数据，我建议您查看在某些方面更灵活的SVG。 MDN has a series of fairly comprehensive articles on the subject.

Answer 2

Canvas不存储对象一切都只是栅格化图像。因此，如果要将画布数据作为对象访问，则必须使用canvas libs，即fabric.js