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: stackoverflow.com/questions/24575090/…. You can add the form data to your AJAX data packet and have your php store them with the canvas dataUrl. — markE
– markE, Commented Aug 17, 2015 at 21:03

Community · Accepted Answer · 2017-05-23 11:59:52Z

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.

CommunityBot

11 silver badge

answered Aug 17, 2015 at 8:59

Ponpon32

2,2102 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Knase · Accepted Answer · 2015-08-17 08:43:40Z

0

Use base64_encode for create text in MySQL database.

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

answered Aug 17, 2015 at 8:43

Knase

1,27414 silver badges23 bronze badges