Wenn ich ein einfaches Bild über das Netzwerk übertrage, ist es schnell. Wenn ich versuche, das gleiche Bild, das in einer Leinwand erstellt wurde, mit toDataURL zu übertragen, ist es viel langsamer. Warum?Warum ToDataURL ist so langsam?
Sie sind nicht zu viel Kontext so im Allgemeinen zu geben:
Wenn Sie toDataURL() verwenden wird der Browser das Bild als Base-64-Stream mit einem kleinen Kopf kodieren. Die base-64 erhöht die Größe immer um 33% im Vergleich zur nicht codierten Größe.
Wenn Sie eine JPEG-kodierte Datei nativ übertragen, ist sie in der Regel kleiner als eine PNG-Version des Bildes. Wenn Sie vergessen, den Bildtyp für toDataURL anzugeben, wird der Browser standardmäßig auf PNG eingestellt.
In diesem Fall geben Sie JPEG auf diese Weise:
var quality = 0.7;
var dataUri = canvas.toDataURL('image/jpeg', quality);
Folgefrage. Gibt es irgendwelche Nachteile beim Speichern des dataUri, sagen wir localspeicher, in Bezug auf die Leistung? – JohnAndrews
@JohnAndrews nicht für die Leistung (der Overhead wäre immer noch da), aber Data-URI wäre erforderlich, da localSotrage nur Zeichenfolgen verwendet. Aber Speicherplatz * Raum * wird leicht zu einem Problem werden. IndexedDB ist eine bessere Wahl für diese IMHO und es kann Blobs speichern. – K3N
Ahh das war es, ich nahm an, dass es standardmäßig auf das Eingabebild umstellen würde, was sich bei jpeg um einiges schneller ändern würde, danke Kumpel! Ich freue mich auf die Implementierung von 'canvas.toBlob' in Chrome, damit es noch schneller und nicht blockierend sein kann –
nicht genügend Informationen. – akonsu
Optimierung? Wie viel wiegt das reguläre Bild gegenüber dem generierten? – Boaz
define 'transfer' – charlietfl