How to input image from canvas to MySql database?

Question

I have an image in canvas but want to upload it to database. I have no problem with upload when it's classical (trough <input type='file'>).

I know how to download it from canvas, but have problem with upload from it.

Also, after fooling around with image in canvas, some form should be filled.

Nothing special it's for, some marketing campaign, where you upload photo, put some filters and frames, than upload it.

(1) convert the canvas content to a base64 encoded string using `.toDataURL`, (2) transmit that string to a `.php` script on your server with AJAX -- jQuery does this well, (3) create a parametized MySQL statement to store the encoded string to your database. Your question has been asked + answered many times on Stackoverflow. Here's one example post: http://stackoverflow.com/questions/24575090/how-can-we-save-html5-canvas-image-to-database-in-php/24577302#24577302. You can add the form data to your AJAX data packet and have your php store them with the canvas dataUrl. — markE, Aug 17 '15 at 21:03

score 3 · Accepted Answer · edited May 23 '17 at 11:59

3

You can get base64 image encoded and save it to database.

var canvas = document.getElementById("canvasObj");
var pngUrl = canvas.toDataURL(); // PNG is the default

Code taken from here, you should read it first.

edited May 23 '17 at 11:59

Community

answered Aug 17 '15 at 08:59

Ponpon32

score 0 · Answer 2 · answered Aug 17 '15 at 08:43

0

Use base64_encode for create text in MySQL database.

$image = file_get_contents('filename.gif');
$imageText = base64_encode($image);

answered Aug 17 '15 at 08:43

Knase

2 Answers2