Por alguna razón, esta información es imposible de encontrar una respuesta directa, he estado tratando de resolver esto durante más de una semana. ¡Así que por favor dé una respuesta útil solo!
Estoy guardando la imagen canvas.toDataUrl en el servidor con los siguientes pasos:
JAVASCRIPT
function captureCanvas(){ html2canvas(displayScreen).then(canvas =>{ postPicture(canvas.toDataURL()); }) } function postPicture(data){ let xhr = new XMLHttpRequest(); xhr.onload = function (){ if (this.status == 200){ let result = document.getElementById('result-pic'); console.log('this is the response:'+this.response); result.src = this.response; } } xhr.open('POST', 'storeImage.php', true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send('image='+data); }Luego, tratando de almacenarlo con el lado del servidor/mostrar el resultado nuevamente en el archivo html: PHP
$baseFromJavascript = $_POST['image']; $data = base64_decode(preg_replace('#^data:image/w+;base64,#i', '', $baseFromJavascript)); $filepath = "./upload/image.png"; file_put_contents($filepath,$data); echo $baseFromJavascript;Ni se abre como una imagen localmente ni se muestra en html , aunque el html img tiene los datos base64 .
Tienes que hacer algunos cambios en Javscript así como en PHP
Codifique sus datos en JS para que la solicitud se envíe correctamente
function captureCanvas(){ html2canvas(displayScreen).then(canvas =>{ postPicture(canvas.toDataURL()); }) } function postPicture(data){ let xhr = new XMLHttpRequest(); xhr.onload = function (){ if (this.status == 200){ let result = document.getElementById('result-pic'); console.log('this is the response:'+this.response); result.src = this.response; } } xhr.open('POST', 'storeImage.php', true); xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhr.send('image='+encodeURIComponent(data)); }Cambie su script php como se muestra a continuación:
$baseFromJavascript = $_POST['image']; $data = $baseFromJavascript; list($type, $data) = explode(';', $data); list(, $data) = explode(',', $data); $data = base64_decode($data); $filepath = "./upload/image.png"; file_put_contents($filepath,$data); echo $baseFromJavascript;