1
Ich versuche, von einer Leinwand auf einen Server mit Ajax zu laden, aber jedes Mal scheint ich eine leere Bilddatei von 879 Bytes zu bekommen. Ich bin mir nicht sicher, wo ich falsch liege. Wenn jemand einen Blick darauf werfen könnte, würde es sehr geschätzt werden.Versucht, Leinwanddaten zu speichern, Datei am Ende leer
document.getElementById('input').addEventListener("change",function (e) {
var file = e.target.files[0];
var reader = new FileReader();
var output = document.getElementById('test');
reader.onload = function() {
var data = this.result;
var img = new Image();
img.src = data;
img.onload = function() {
var ctx = canvas.getContext("2d");
output.innerHTML = 'width: ' + img.width + '\n' + 'height: ' + img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
};
};
reader.readAsDataURL(file);
var canvasData = canvas.toDataURL("image/png");
Ajax unter
$ Schnipsel ({ Typ: "POST", url: "upload_images.php", Daten: {canvasData: canvasData}, Erfolg: function() { } });
$upload_dir = 'uploads/'; //implement this function yourself
$img = $_POST['canvasData'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
Sie rufen 'toDataURL' aus Ihrem Callback auf, so dass es ausgeführt wird, bevor das Bild darauf gezeichnet wurde ... – Kaiido
Sie warten nicht darauf, dass das Onload ausgeführt wird, und geben daher eine leere Zeichenfläche aus. JS ist single-threaded und der Onload wird nicht ausgelöst, bis Sie die aktuelle Ausführung beendet haben. Fügen Sie toDataURL am Ende der Onload-Funktion hinzu – Blindman67