1

I've written a small sketch in p5.js that finishes by saving a snapshot of the canvas using the saveCanvas() method.

When I have the console open, things happen exactly as I would expect (a file with the name I provide is saved to the Downloads folder). However, if I close the developer console, I see "download, Failed - Network error."

This issue only seems to happen in Chrome. I have been able to run the sketch successfully using Safari and Firefox with no consoles open.

I have already removed any reference to console in my code (such as console.log()).

Mitchell Griest
  • 467
  • 1
  • 7
  • 21

1 Answers1

3

This is a known restriction in chrome's max-length for anchor's href.

The usual workaround is to request an Blob, and then create a blobURI instead of an dataURI, or to convert the data-URI to a Blob and a blobURI.

But since you are using p5.js 's method, they should do it, so for a real fix, you'll have to post an issue on their tracker.

For a workaround, you can still access yourself the canvas element,

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

call its toBlob() method, then use something like FileSaver.js to get the same result.

Kaiido
  • 123,334
  • 13
  • 219
  • 285