0

我们目前有一个基于 NodeJS 的网络应用程序，其中收集数据并使用 plotlyJS 将其图表显示为图像。下面显示的是一个这样的代码片段，它将数据图表创建为图像并使用生成的 URL 来更新相应的元素（每秒发生一次）。

var d3 = Plotly.d3;
var img_jpg = d3.select("#" + images[id_img]);
var old_url = img_jpg.src;

Plotly.newPlot(plotly_id, plot_data, layout).then(function (gd) {
    Plotly.toImage(gd, { height: 1280, width: 2000 })
        .then(function (url) {
            img_jpg.attr("src", url);
        });
});

这部分代码按预期工作，但留下了一系列 URL。精确的 blob 和数据 URL，如下面的屏幕截图所示。

调试器工具的输出显示生成的 blob 和数据 URL

随着时间的推移，这些 URL 会淹没浏览器内存，并在一段时间后导致崩溃。 运行应用程序几秒钟后堆叠的 URL

重新加载页面有帮助，但不友好。试过https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL但似乎没有帮助。您能否建议如何从当前实例中清除这些 URL。期待建议，谢谢！

4

1 回答 1

0

调用 revokeObjectURL 时，您还需要清除对 blobUrl 的所有引用，以便释放它。

如果图像源是 blobUrl：

image.src = blobUrl;

像这样清除它对我有用：

URL.revokeObjectURL(blobUrl);
image.src = "";
blobUrl = undefined;
于 2022-02-20T18:09:59.970 回答