HTML5 canvas元素的访问值

Question

我是HTML5的新手.

使用典型元素和类似jQuery的东西,我通常能够访问它的值

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

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

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

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

谢谢你的帮助!

Answer 1

您可以使用该getImageData()方法.这会返回一个ImageData对象.ImageData包含width属性,height属性和CanvasPixelArray基本上是位图的对象.ImageData可能对将数据加载回画布(使用该putImageData()方法)最有用,但如果您愿意,也可以检查像素数组的原始数据.

您可以在此处阅读有关ImageData的更多信息.

你可以在这里阅读有关画布像素操作的内容.

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

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

如果您确实希望提取文本数据,我建议您查看在某些方面更灵活的SVG.MDN有一系列关于这一主题的相当全面的文章.