javascript - 将图像存储在内存中 - ImageData vs Image Element

Question

假设我必须从服务器下载一系列图像（例如 200 个）并将它们保存在内存中。到目前为止，我尝试过的两种方法是：

let images = []

// in async loop
...

let image = new Image()

image.src = src

let images.push(image);

...

let images.push(image);

对比

let images = [];
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');

// in async loop
let image = await loadImage(); // load image from server

canvas.width = img.width;
canvas.height = img.height;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

let images.push(imageData);

在这两种情况下，我都将图像元素或 imageData 对象保存在一个数组中。在内存消耗等方面，一种方法会比另一种更好吗？

标签： javascripthtml