Tengo este programa simple que guarda el canvas en blob file , estoy tratando de recuperarlo en php , pero no puedo acceder a él.
Mi console.log(FormData) muestra correctamente el contenido del archivo blob .
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']); }; ?>Está agregando la imagen con un nombre diferente al que está tratando de recuperar.
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'])){ // ...