javascript - Access value of an HTML5 canvas element - Stack Overflow

admin管理员组

文章数量:1393843

I am new to HTML5.

With a typical element and something like jQuery I am typically able to access its value with

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

EDIT: say i write "abcd" in the canvas element ..i want to be able to "store" "abcd" in a database somewhere...

if it were pure text i would access it as shown above with jquery but with a drawing im not sure how it would work?

how do i achieve the same result with a canvas element? and what format can i expect the result in? Would I have to get an array of all x,y coordinates and parse that some how? do i get an image?

Thanks for your help!

I am new to HTML5.

With a typical element and something like jQuery I am typically able to access its value with

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

EDIT: say i write "abcd" in the canvas element ..i want to be able to "store" "abcd" in a database somewhere...

if it were pure text i would access it as shown above with jquery but with a drawing im not sure how it would work?

how do i achieve the same result with a canvas element? and what format can i expect the result in? Would I have to get an array of all x,y coordinates and parse that some how? do i get an image?

Thanks for your help!

• javascript
• html
• html5-canvas

Share Improve this question Follow edited Jan 31, 2013 at 7:58 algorithmicCoder asked Jan 31, 2013 at 7:49 algorithmicCoderalgorithmicCoder 6,7952121 gold badges7575 silver badges118118 bronze badges 4

• What do you exactly want to achieve? To select the canvas element or the content of the canvas? – Endre Simo Commented Jan 31, 2013 at 7:54
• say i write "abcd" in the canvas element ..i want to be able to "store" "abcd" in a database somewhere...if it were pure text i would access it as shown above with jquery but with a drawing im not sure how it would work? – algorithmicCoder Commented Jan 31, 2013 at 7:57
• edited the question to make it clear – algorithmicCoder Commented Jan 31, 2013 at 7:58
• it's almost impossible, except if you want to save the image instead – Endre Simo Commented Jan 31, 2013 at 8:02

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can use the getImageData() method. This returns an ImageData object. ImageData contains a width property, a height property and a CanvasPixelArray object which is essentially a bitmap. ImageData is probably most useful for loading data back into a canvas (using the putImageData() method), but you can also examine the raw data of the pixel array if you so desire.

You can read more about ImageData here.

And you can read about canvas pixel manipulation here.

---

It appears that I may have misunderstood your question. If by storing "abcd" in your database, you wish to store the bitmapped image, then you simply need to extract the pixel data and then store it as a BLOB or similar object. This is what I assumed you meant.

If however you wish to store the actual text "abcd" in your database, you are going to have a much more difficult time. You need to think of canvas as a literal canvas. Once you put something on it, it bees part of the image. It isn't like SVG where specific ponents can be extracted back out again. Canvas is essentially a bitmap image, so if you wish to extract textual data from it without having access to the design algorithm you would have to use some sort of OCR algorithm (which would of course be highly unadvisable).

If you do indeed wish to extract textual data, I remend that you take a look at SVG which is more flexible in some respects. MDN has a series of fairly prehensive articles on the subject.

Canvas doesn't store objects everything is just rasterized image. So if you want to access to canvas data as objects you have to use canvas libs i.e fabric.js

本文标签： javascriptAccess value of an HTML5 canvas elementStack Overflow