Ich habe ein Problem mit .toDataURL() für große Canvas. Ich möchte in base64 dekoncen und auf PHP-Datei dekodieren, aber wenn ich eine große Leinwand habe die strDataURI Variable ist leer.
Mein Code:
%Vor% Gibt es eine Alternative zu .toDataURL() oder eine Möglichkeit, das Größenlimit zu ändern?
Danke.
Ich bin mir nicht sicher, ob es Beschränkungen für Canvas-Dimensionen gibt, aber Daten-URLs haben abhängig vom Browser Einschränkungen: Einschränkungen der Daten-URL-Größe .
Was Sie ausprobieren könnten, ist die Verwendung von Node.js + node-canvas (serverseitig), um den Canvas neu zu erstellen. Ich habe diese verwendet, um druckbare Bilder aus Canvas-Elementen zu erstellen, und hatte bislang keine Probleme / Einschränkungen mit toDataURL.
Verwenden Sie die Bibliothek fabric.js? Ich habe bemerkt, dass du auch in ihrem Forum gepostet hast. Fabric.js kann in Node.js verwendet werden und hat einen toDataURLWithMultiplier -Methode, die den Canvas / Kontext skaliert, so dass Sie die Größe des Daten-Bilds ändern können. Sie können die Methodenquelle überprüfen, um zu sehen, wie dies gemacht wird.
Da Sie fabric.js verwenden, würde ich vorschlagen, Node.js zu verwenden, um die Zeichenfläche für die Bildverarbeitung auf dem Server zu verwenden. Weitere Informationen zur Verwendung von Fabric.js auf Node.js finden Sie hier .
Hier ist ein einfacher Server mit Node.js und Express:
%Vor% Wenn der Server läuft, können Sie Daten an ihn senden ( postData ).
Der Server erwartet json , width und height , um die Zeichenfläche neu zu erstellen, und multiplier , um das Daten-URL-Bild zu skalieren. Der clientseitige Code würde etwa so aussehen:
Sie sollten zuerst Folgendes beachten: Die Größe des Uploads ist begrenzt. Das Limit hängt von der Browser-, Betriebssystem- und Serverumgebung ab. Sie können sich diesen Artikel ansehen: Ссылка
Im Allgemeinen können Sie Folgendes versuchen: Zuerst benötigen wir eine Funktion, um die DatenURI in einen Blob umzuwandeln:
%Vor%und als nächstes eine Funktion zum Hochladen der Datei mit XMLHttpRequest2:
%Vor% Jetzt können Sie Ihre strDataURI an die erste Funktion übergeben und dann die Datei mit der zweiten Funktion hochladen.
Sie können sich XMLHTTPRequest2 hier genauer ansehen: Ссылка und über den Blob-Konstruktor hier: Ссылка
Sie könnten das Bild immer in kleinere Abschnitte aufteilen und diese einzeln speichern, was wahrscheinlich sowieso keine schlechte Idee ist. Im Grunde würden Sie eine Funktion haben, die etwas wie
ist %Vor%Sie haben den Code aktualisiert, um die Leinwand in kleinere Leinwandobjekte zu unterteilen. Funktioniert ziemlich gut und hat auch einen Tracker hinzugefügt:
Dies ermöglicht die Verfolgung des Upload-Prozesses und insgesamt denke ich, ist es besser für den Benutzer. Ich benutze PHP, um zu einem späteren Zeitpunkt wieder zusammenzukommen.
Es vermeidet die Probleme der Größe von Canvas / Browser etc.
Mein erster Beitrag, also hoffe es hilft!
// gib den Typ für den Dateinamen ein
%Vor%Ajax zum Hochladen:
%Vor%Tags und Links canvas html5-canvas fabricjs