POSTing base64 Daten JavaScript/jQuery

Question

Ich arbeite an einer Website, die es Benutzern ermöglicht, Fotos (im Browser) zu bearbeiten und sie dann hochzuladen. Um die Bilder im Browser zu bearbeiten, verwende ich einige JavaScript-Bibliotheken, die mit Bildern in base64 arbeiten. Als Ergebnis kann ein einfaches Formular mit einer Dateieingabe nicht verwendet werden, um das Bild an meinen Server zu senden. Der Wert einer ausgeblendeten Eingabe wird auf eine Base64-Zeichenfolge des bearbeiteten Bildes gesetzt, und das ist POSTed. Bitte beachten Sie das folgende, kurze Beispiel.

http://pastebin.com/PrfWaS3D

Offensichtlich ist dies sehr viel abgespeckte, aber es enthält das Problem, das ich in laufen lasse. Wenn Sie ein animiertes GIF mit 3 MB animierten, dauerte es 6,5 Minuten. Währenddessen war mein Computer fast vollständig eingefroren/reagierte nicht. (Anmerkung: Dies funktioniert perfekt für kleine Bilder, obwohl)

Es könnte ein OS/Browser-Problem sein, (neueste Google Chrome auf Ubuntu), aber ich bezweifle es. Wenn ich diese Dateieingabe in das Formular einfüge und die base64 von Daten lösche (d. H. Eine Standard-POST-Operation einer Datei), dauert es etwa eine Sekunde.

Vergleichen Sie 6,5 Minuten bis 1 Sekunde. Ich muss etwas falsch machen. Was mache ich hier falsch? Was sollte ich stattdessen tun? Ich bin ziemlich neu in der Webentwicklung, also bin ich ein wenig im Dunkeln. Mir ist bewusst, dass base64 eine Größenzunahme von etwa 1,3x verursacht, aber offensichtlich ist die Upload-Zeit hier nicht skalierbar mit 1,3x. Ich habe ein wenig console.logging gemacht, und dauert ungefähr eine Sekunde. Ich denke also nicht, dass der Flaschenhals da ist. Der Flaschenhals muss beim Hochladen sein. Aber warum? Warum ist eine Formulardatei-Eingabe so viel schneller als ein Formular versteckte Eingabe mit base64?

Ich entschuldige mich für meine langatmige Post, aber wieder, ich bin neu in Web-Entwicklung, und nicht wirklich mein Problem zu verstehen, so ist es schwer, kurz und dabei alle Informationen über.

Dank

Answer 1

Da Sie etwas moderne JS API sowieso verwenden, könnte es besser sein zu verwenden:

• URL.createObjectURL() eine URL von einem Blob (viel schneller und prüfbare als Daten URLs) zu erstellen
• btoa() zu base64 kodieren eine Zeichenfolge (nicht mehr notwendig)
• FormData eine POST-Anforderung erstellen
• XHR2 zu Sende es an den Server (inkl. Fortschritt sogar!
)

So etwas wie folgt aus:

1. Get file:
   file = input.files[0]
2. Convert Array eingegeben haben, zaubern, konvertieren zurück in Blob:
   blob = <magic here>
3. erstellen POST:
   fd = new FormData; fd.append('file', blob, 'image.png');
4. Hochladen:
   xhr = new XMLHttpRequest; ... xhr.send(fd);

Answer 2

<form action="1.php" method="post"> 
    <input type="text" id="txt" name="txt"> 
    <input type="submit" value="submit" > 
</form> 


function convertToDataURLviaCanvas(url, callback, outputFormat){ 
    var img = new Image(); 
    img.crossOrigin = 'Anonymous'; 
    img.onload = function(){ 
     var canvas = document.createElement('CANVAS'); 
     var ctx = canvas.getContext('2d'); 
     var dataURL; 
     canvas.height = this.height; 
     canvas.width = this.width; 
     ctx.drawImage(this, 0, 0); 
     dataURL = canvas.toDataURL(outputFormat); 
     callback(dataURL); 
     canvas = null; 
    }; 
    img.src = url; 
} 
convertToDataURLviaCanvas('1.jpg', function(base64Img){ 
    console.log(base64Img); 
    document.getElementById('txt').value= base64Img; 
}); 

1.php

echo '<img src="'.$_POST['txt'].'" />';