I have this simple program that saves canvas into blob file, I am trying to retrieve it in php, but I can't manage to access it.
My console.log(FormData) does show the blob file content properly.
HTML:
<form id="formId">
<button id="click-photo" type="submit" value="submit">Click Photo</button>
<canvas id="canvas" width="320" height="240"></canvas>
</form>
JavaScript:
form.addEventListener('submit', function(e) {
e.preventDefault();
var xhr = new XMLHttpRequest();
var image_data_url = "";
xhr.open('POST', 'image.php', true);
if(xhr.readyState === XMLHttpRequest.DONE) {
var status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
alert(xhr.reponseText);
};
};
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
image_data_url = canvas.toDataURL('image/jpeg');
var file = dataURLtoBlob( canvas.toDataURL('image/jpeg') );;
const fd = new FormData;
fd.append('image', file);
xhr.send(fd);
});
PHP:
<?php
if (isset($_FILES['image'])){
print_r ($_FILES['image']);
};
?>
You are adding the image with a different name than the one you are trying to retrieve.
form.addEventListener('submit', function(e) {
e.preventDefault();
var xhr = new XMLHttpRequest();
var image_data_url = "";
xhr.open('POST', 'image.php', true);
xhr.onreadystatechange = function ()
{
if(xhr.readyState === XMLHttpRequest.DONE) {
var status = xhr.status;
if (status === 0 || (status >= 200 && status < 400)) {
alert(xhr.reponseText);
};
};
}
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
image_data_url = canvas.toDataURL('image/jpeg');
var file = dataURLtoBlob( canvas.toDataURL('image/jpeg') );;
const fd = new FormData;
fd.append('image', file);
xhr.send(fd);
});
// ...
if (isset($_FILES['file'])){
// Up here it should be: if (isset($_FILES['image'])){
// ...