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

Question

我在 p5 中写了一个小草图.js最后使用 saveCanvas() 方法保存画布的快照。

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

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

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

Answer 1

这是 chrome 锚点href的最大长度中的已知限制。

通常的解决方法是请求 Blob，然后创建 BlobURI 而不是 dataURI，或者将数据 URI 转换为 Blob 和 BlobURI。

但是由于您使用的是 p5.js 的方法，他们应该这样做，因此要进行真正的修复，您必须在他们的跟踪器上发布问题。

对于解决方法，您仍然可以访问自己的 canvas 元素，

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

调用其toBlob()方法，然后使用类似FileSaver.js获得相同的结果。