javascript - 除非控制台打开，否则 p5.js saveCanvas() 在 Google Chrome 中失败并显示 "Network error"

Question

我在 p5.js 中写了一个小草图，它通过使用 saveCanvas() 方法保存 Canvas 的快照来完成。

当我打开控制台时，事情完全按照我的预期发生(一个具有我提供的名称的文件保存到下载文件夹中)。但是，如果我关闭开发人员控制台，我会看到“下载失败 - 网络错误”。

这个问题似乎只发生在 Chrome 中。我已经能够在没有打开控制台的情况下使用 Safari 和 Firefox 成功运行草图。

我已经在我的代码中删除了所有对 console 的引用(例如 console.log())。

Answer 1

这是 chrome 对 anchor href 最大长度的已知限制。

通常workaround是请求一个Blob，然后创建一个blobURI而不是dataURI，或者将data-URI转换为一个Blob和一个blobURI。

但由于您使用的是 p5.js 的方法，他们应该这样做，所以要真正解决问题，您必须 post an issue在他们的追踪器上。

作为解决方法，您仍然可以访问自己的 Canvas 元素，

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

调用它的 toBlob()方法，然后使用类似 FileSaver.js 的东西得到相同的结果。