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
  • 447
  • 1
  • 6
  • 20

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
  • 103,356
  • 8
  • 183
  • 231