CODEWITHSUNDEEP
mysqldatabasehtmlcanvasbase64
Joris Ooms
Joris Ooms

Reputation: 12038

Saving a canvas drawn image to a mysql database

I was wondering about the best way to tackle this. I'm trying to save a user-drawn image on a HTML5 canvas to my database so I can retrieve it later.

I got as far as creating the base64 data string for the image with the following code, hooked to a simple button clickhandler:

var image_data = $("#drawing_canvas").get(0).toDataURL('image/png');

I was planning on saving that data to my database and then retrieving it later on with something like this:

var myImage = new Image();
myImage.src = imgData;
ctx.drawImage(myImage, 0, 0);

However, these base64 'strings' seem to contain a lot of data. I was wondering if there's a better way to save these images to my database? I have yet to figure out a way to save the actual image as a .png. I could get it to open as a png in a new browser tab, but that's where I'm stuck at the moment.

Or would it be fine to store these base64 data strings in my database (in, I suppose, a 'text' column)?

Thanks in advance.

Upvotes: 2

Views: 2426

Answers (1)

undefined
undefined

Reputation: 6463

You want to use a BLOB type. Here's what the MySQL docs say about it:

BLOB values are treated as binary strings (byte strings). They have no character set, and sorting and comparison are based on the numeric values of the bytes in column values. TEXT values are treated as nonbinary strings (character strings). They have a character set, and values are sorted and compared based on the collation of the character set.

http://dev.mysql.com/doc/refman/5.0/en/blob.html

Upvotes: 3

Related Questions