beim Speichern Canvas-Bild Server-Seite, aus einer Base64-Daten-String, es leere Bild erzeugen

Question

Ich habe ein Problem mit dem Speichern Canvas Bild in PHP. Ich bekomme eine leere .png Datei. Ich suche viel nach diesem Problem, kann aber nichts Nützliches finden. Warum speichert es ein leeres Bild anstelle eines echten Bildes?

JavaScript-Code:

html2canvas([document.getElementById('dadycool')], { 
    onrendered: function (canvas) { 
     var data = canvas.toDataURL(); 
     var image = new Image(); 
     image.src = data; 
     document.getElementById('imagec').appendChild(image); 
     console.log(data); 
     $.ajax({ 
    type: "POST", 
    url: "up.php", 
    data: { 
    imgBase64: data 
    } 
}).done(function(o) { 
    console.log('saved'); 
}); 
} 

PHP-Code:

<?php 
// requires php5 
define('localhost/samp/sample2/uploads', 'images/'); 
$img = $_POST['imgBase64']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = localhost/samp/sample2/uploads . uniqid() . '.png'; 
$success = file_put_contents($file, $data); 
print $success ? $file : 'Unable to save the file.'; 
?> 

Answer 1

Ich vermute, Sie haben Ihre Entwicklungsbox nicht so konfiguriert, dass PHP-Fehlermeldungen angezeigt werden. Sie definieren eine Konstante, die kein gültiger Bezeichner ist:

define('localhost/samp/sample2/uploads', 'images/'); 

Das bedeutet, dass Sie es nicht direkt verwenden können:

$file = localhost/samp/sample2/uploads . uniqid() . '.png'; 

... Triggern werden sollten:

Notice: Use of undefined constant localhost - assumed 'localhost' 
Notice: Use of undefined constant samp - assumed 'samp' 
Warning: Division by zero 
Notice: Use of undefined constant sample2 
Warning: Division by zero 
Notice: Use of undefined constant uploads - assumed 'uploads' 
Warning: Division by zero 

. .. und file enthalten nur den Basisdateinamen (z. B. 53676a01cdb59.png), aber keine Pfadkomponente. Sie müssen diese Syntax verwenden:

$file = constant('localhost/samp/sample2/uploads') . uniqid() . '.png'; 

... oder, noch besser, die Konstante einen vernünftigen Namen geben:

define('DIR_UPLOADS', 'images/'); 

Answer 2

ich das gleiche Problem haben - es sah aus wie das base64 Daten korrekt gesendet wurde, aber immer konnte die Bildserverseite erzeugen, . Die Lösung, die ich fand, war, das 'FormData'-Objekt und eine sehr einfache xhr-Anfrage zu verwenden, um auf dem Server zu posten.

var url='/path/to/save.php'; 
var data=oCanvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''); 
var fd=new FormData(); 
fd.append('imgdata',data); 

var request = new XMLHttpRequest(); 
request.open('POST', url); 
request.send(fd); 

Ich bin 99% sicher, dass das Problem durch den falschen Content-Type-Header verursacht wurde durch die xhr Anfrage gesendet werden. Durch die Verwendung einer einfachen xhr-Anfrage in Kombination mit FormData wurde die xhr-Anfrage mit dem Inhaltstyp multipart/formdata mit korrekt definierten Inhaltsgrenzen gesendet.