Send canvas and form to server save image with custom name

canvas, html, javascript, jquery, php

Solution

Try this:

$dataURL = $_POST["imageDataURL"];
$dataURL = str_replace('data:image/png;base64,', '', $dataURL);
$dataURL = str_replace(' ', '+', $dataURL);
$image = base64_decode($dataURL);
$filename = 'newImage.png';
file_put_contents('path/to/' . $filename, $image);

Also, in your Javascript you missed out the quotations in `.toDataURL`

var dataURL = document.getElementById('colors_sketch').toDataURL('image/png');

--- UPDATE ---

In your case, the image data is actually not being passed to your upload handler (PHPtestuplaod.php) since submitting the form will cause a page redirect. So a possible workaround on this will be:

HTML

<!-- add this inside your form. 
     this will be used to carry the image data into
     the upload handler -->
<input type="hidden" name="imageData" id="imageData" />

jQuery

$("form").submit(function(e) {
  // let's prevent the default behavior for now,
  // so that we'll have time to include the image data
  e.preventDefault();

  // get the canvas image data
  var imageData = document.getElementById("colors_sketch").toDataURL("image/png");

  // let the hidden field we added earlier carry the image data into the upload handler
  $("#imageData").val(imageData);

  // submit the form
  $(this).submit();
});

PHP

$dataURL = $_POST["imageData"];
$dataURL = str_replace('data:image/png;base64,', '', $dataURL);
$dataURL = str_replace(' ', '+', $dataURL);
$image = base64_decode($dataURL);
$filename = 'newImage.png';
file_put_contents('path/to/' . $filename, $image);

You may want to remove your AJAX call, since it won't be needed here now.

Problem

I am trying to send the canvas image to the server. Hi everyone I know this has been asked a lot. (I've already asked it once before) The form data is sent too and this is used to name the file sent to the server so that it is identifiable who drew the image. My site is here! HTML ``` <form action="PHPtestupload.php" method="post"> Name <input type="text" name="name" value="" style="width:230px; margin-left: -160px; font-size:1em; "/> Email <input type="email" name="email" value="" style="width:230px; margin-top: 12px; margin-left: -160px; font-size:1em; "/> <input type="submit" onclick="postImagePlusForm();" value="Submit" style=" opacity:1; -webkit-appearance: none; width:100px; height:50px; margin-left: -50px;"> </form> ``` JS ``` // sends image to server // serialize your canvas var dataURL=document.getElementById('colors_sketch').toDataURL(image/png); // serialize your form var str = $("form").serializeArray(); // wrap both in an object var package={ formData: str, imageDataURL: dataURL } // ajax it postImagePlusForm(); function postImagePlusForm(){ $.ajax({ type: "POST", url: "PHPtestupload.php", data: package, success: function(value) { // ...we have success! } }); ``` } PHP ``` if ( isset($_POST["imageDataURL"]) && !empty($_POST["imageDataURL"]) ) { // create $dataURL $dataURL = $_POST["imageDataURL"]; // Extract base64 data // we have an unneeded header, zap it $parts = explode(',', $dataURL); $data = $parts[1]; // Decode $data = base64_decode($data); // Save $fp = fopen('newImage.png', 'w'); fwrite($fp, $data); fclose($fp); if ( isset($_POST["formData"]) && !empty($_POST["formData"]) ) { $formData = $_POST['formData']; foreach ($formValue as $x) { // do whatever you need to do with each form value ($x) } ``` Alternative PHP using different Javascript on the web page, with semi-working site here! I think that the server shuts down the PHP as it functions locally but doesn't work when online. It generates lots of error logs. ``` $data = file_get_contents('php://input'); $canvasImg = imagecreatefrompng($data); $width = imagesx($canvasImg); $height = imagesy($canvasImg); $outImg = imagecreatetruecolor($width, $height); $color = imagecolorallocatealpha($outImg, 255, 255, 255, 127); imagefill($outImg, 0, 0, $color); imagecopy($outImg, $canvasImg, 0, 0, 0, 0, $width, $height); imagepng($outImg, 'test.png'); $name = $_POST['name']; $email = $_POST['email']; $target = 'test.png'; $newName = $name . $email; rename($target, $newName); ```

Original source