saving canvas in php but no data in image file - php

Question

Following code i am trying to save canvas on my Machine . in folder image file is created but it is of 0kb .
on click of download button i am setting value in text and on next php page i am reading value with $_POST['img_name']; .
JQuery ::
$("#Download").click(function() {
console.log('Download clicked');
//alert('Download clicked');
var myval = canvas.toDataURL();
$('#img_txt').val(myval);
});
php code ::
<?php
$myval = $_POST['img_name'];
echo "string is ".$myval;
?>
<?php
$data = base64_decode($_POST['img_name']);
/* Name the file anything you want */
$filename = 'my_image.png';
/* Remove 1st line of base64 string */
/* Note: replace '$base64' with your own variable */
$img = str_replace('data:image/png;base64,', '', $data);
/* Replace spaces */
$img = str_replace(' ', '+', $img);
/* Decode string */
$data = base64_decode($img);
/* Full path to upload directory with at the end the filename */
$file = 'D:/upload/'.$filename;
/* Save, make sure the directory is writeable! */
file_put_contents($file, $data);
?>
I have check $_POST['img_name'] i am getting base64 string ? what is the problem in my code?

Answer 1

Replace upload.php file
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {
// get the image data
$data = $_POST['image'];
// remove the prefix
$uri = substr($data,strpos($data,",")+1);
// create a filename for the new image
$file = md5(uniqid()) . '.png';
// decode the image data and save it to file
file_put_contents($file, base64_decode($uri));
// return the filename
echo $file;
}

Answer 2

Your jQuery isn't sending anything to your .php
Try this:
// convert the canvas to base64 data
var dataURL=canvas.toDataURL();
// call upload.php and post the data
$.ajax({
type: "POST",
url: "upload.php",
data: {image: dataURL}
}).done(function( respond ) {
console.log("Saved filename: "+respond);
});
Your upload file should remove the datatype prefix before decoding.
Try this for upload.php:
<?php
if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {
// get the image data
$data = $_POST['image'];
// remove the prefix
$uri = substr($data,strpos($data,",") 1);
// create a filename for the new image
$file = md5(uniqid()) . '.png';
// decode the image data and save it to file
file_put_contents($file, base64_decode($uri));
// return the filename
echo $file;
}
Also, make sure your php server is configured:
Assign an upload directory
Give write permission to the upload directory

Answer 3

I used Following code to save base64 as an image,
<?php
if (isset($_POST["image"]) && !empty($_POST["image"])) {
// get the image data
$data = $_POST['image'];
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
//Image name
// $filename ="image". md5(uniqid()) . '.png';
$filename = "Post_Card.png";
$file = '../ReportCard/' . $filename;
// decode the image data and save it to file
file_put_contents($file, $data);
echo $file;
}
?>
If require we can use following code to give random generated names to file ,
// create a filename for the new image
$file = md5(uniqid()) . '.png';

Answer 4

Are you sure it is a png format?
because when you run the method toDataURL(); the default is PNG you cant try toDataURL("image/jpeg"); or any other format that correspond wit your need.
And you might want to consider uploading it to PHP so you can save it on your server in a directory let's say Pics.