Uploading An Image From Canvas To Php Server Using Ajax

In the software I am building, I am using the webcam to take a picture and from there upload it to the PHP server for later usage. I have successfully uploaded images from my compu

Solution 1:

You are not sending it as a file to send it as one use Blob or File object

var blob = new Blob([capture ], {type: 'application/octet-binary'});
var form = new FormData();
var fileName = 'snap.png';    //filename
form.append('something', blob, fileName);

On server decode and save

$dest = 'uploads/'.$_FILES['something']['name'];

move_uploaded_file($_FILES['something']['tmp_name'],$dest);
$file = file_get_contents($dest);
$tmp = explode(',',$file);                       //remove data: header
file_put_contents($dest,base64_decode($tmp[1])); //decode base64 n save

Solution 2:

// Create a blob instead of dataURL (that way you save ~3x bandwidth and CPU)
canvas.toBlob(function(blob) {
  var fd = newFormData()

  // append the blob to a multipart form
  fd.append('image', blob, 'snapshot.png')

  // send the form to the server using ajaxfetch('picture.php', {method: 'post', body: fd})
})