如何在多个fabric js canvas的情况下管理内存？

在我的应用程序中，我有多个Fabric.jscanvas，canvas数量没有限制。 我将通过Fabric.js的loadFromJson方法渲染重JSON。

因此，如果canvas未使用，我想释放结构对象内存。 我怎样才能做到这一点？

一次只能看到一个canvas。 但是我必须在页面加载时渲染所有canvas。 Canvas实际上是一个页面，用户可以通过单击页码或其他内容在页面之间切换。

记住用户可以随时回到任何canvas并尝试涂鸦或使用任何其他Fabric.jsfunction。

这是我的HTML结构：

  .fabricCanvas { border: 1px solid green; margin: 5px; } .canvas-container { margin: 5px; }      

我的JS代码来存储结构实例

 var canvasInstances = []; $('canvas.fabricCanvas').each(function () { var fabricCanvasObj = new fabric.Canvas(this, { isDrawingMode: true }); canvasInstances.push(fabricCanvasObj); fabricCanvasObj.renderAll(); }); console.log(canvasInstances[0]); 

我正在存储实例，以便我以后可以使用它们。 我想要更好的内存管理，基本上在需要时加载和卸载实例。

示例情况DEMO就在这里。 在本演示中，考虑使用z-index将canvas相互覆盖，但它们是DOM的一部分，并且已经在页面加载时呈现。

如有任何疑问，请告诉我，我可以进一步解释。

什么时候有超过5幅canvasiPad浏览器崩溃，我认为是内存问题。

Answer 1

您可能对3件事情感兴趣（按重要性/破坏的顺序）：

1. canvas.clear() – 从中删除所有canvas对象。

2. canvas.dispose() – 删除所有canvas对象并删除所有事件侦听器

3. $(canvas.wrapperEl).remove() （使用jQuery进行说明） – 删除canvas包装元素（包含Fabric使用的上下canvas）。 如果目标是从文档中完全删除Fabriccanvas，则可以在调用dispose之后完成此操作。