p5.js saveCanvas() schlägt mit "Netzwerkfehler" in Google Chrome fehl, außer die Konsole ist geöffnet

Question

Ich habe eine kleine Skizze in p5.js geschrieben, die durch Speichern einer Momentaufnahme des Canvas mit der Methode saveCanvas() endet.

Wenn ich die Konsole öffnen, passieren Dinge genau so, wie ich es erwarten würde (eine Datei mit dem Namen, den ich zur Verfügung stelle, wird im Downloads-Ordner gespeichert). Wenn ich jedoch die Entwicklerkonsole schließe, sehe ich "Download, Failed - Network error".

Dieses Problem scheint nur in Chrome zu passieren. Ich konnte die Skizze erfolgreich mit Safari und Firefox ohne geöffnete Konsolen laufen lassen.

Ich habe bereits einen Verweis auf console in meinem Code entfernt (z. B. console.log()).

Answer 1

Dies ist eine bekannte Einschränkung in der maximalen Länge von chrome für Anker href.

Die übliche workaround ist, einen Blob anzufordern, und dann ein BlobURI anstelle eines DataURI zu erstellen, oder den Daten-URI in einen Blob und einen BlobURI zu konvertieren.

Aber da Sie p5.js Methode verwenden, sollten sie es tun, so dass Sie für eine echte Lösung post an issue auf ihrem Tracker haben müssen.

Für dieses Problem zu umgehen, können Sie sich noch das Element Leinwand zugreifen,

var canvas = createCanvas(w, h); 
var canvasElt = canvas.elt; 

rufen seine toBlob() Methode, dann so etwas wie FileSaver.js verwenden das gleiche Ergebnis zu erhalten.