Javascript html5画布getImageData或toDataURL的结果-哪个会占用更多内存？

我的应用程序的一部分包括html5照片编辑，使用标准2d背景画布和webGL的混合

无论如何，我正在保存“撤消”状态，而用户正在操作他们的照片。这些都作为base64图像数据存储在Javascript对象中

一切正常，性能良好

但是，我想知道从getImageData存储数据是否会占用更少的内存或提供更好的性能

因此，总结我的问题是：

由toDataURL（）生成的base64 jpeg或getImageData（）的结果会占用更多内存空间？两者之间是否存在性能差异（关于加载到画布和从画布中提取数据）

---

提前谢谢。

问得好！我不确定对象本身的真实大小，不同的JS实现应该有所不同，但这并不意味着我们不能做出一些有根据的猜测

首先，我们可以使用这个问题的近似函数：

举个例子：

与ImageData的720056字节相比，字符串可能是80116字节。或者在附近

这里有一个数量级的差异，如果图像简单，差异会更明显。值得记住的是，Base64表示可以被压缩（事实确实如此）。让我们用一块空白画布来看看它的极限：

在空白画布上，dataURL字符串只有1996个字节（或大约1996个字节），但图像数据仍然是720056，当然，图像数据仍然尽职尽责地以细致的数组细节描述每个像素

---

简而言之，如果要存储它，base64字符串可能占用更少的空间。一个数量级。

前几天我刚刚经历了这个。。。getImageData方法返回实际数据存储在uint8array中的图像对象。。。您必须将数据转换为您的数据库可以管理的内容，但这并不值得，最终的输出要比toDataURL方法大得多

让toDataURL base64字符串返回画布也非常简单。。。您只需实例化一个新图像，并为src提供base64字符串

getImageData（）比toDataURL（）占用更多内存

• ImageData是像素阵列，是关于图像的最大信息，像素阵列的长度是

  图像的宽度*图像的高度*4

  ，例如尺寸为100的图像的ImageData长度是

  var imageDataArrayLenth=100*100*4=40000（字节）

• BLOB（JPG或PNG）是否使用JPG或PNG算法压缩的图像数据的大小可以比图像数据小10到20倍（取决于图像内容）
• DataURL（BASE64）是将imageData压缩为JPG或PNG，然后转换为字符串，该字符串比BLOB大37%（）

结论：更好的方法是使用BLOB（）

---

这是一个通常的折衷方案——对于海量存储，您将获得大量的处理时间。我刚刚有一个项目，我正在缓存一个（大约600x500）图像。我首先使用toDataURL实现了这一点，它很小，但将new Image（）.src设置为URL字符串会使我的帧速率降低三分之一。就我而言，提高速度是值得的。

//Example of using blob with objectURL
var canvas = document.getElementById("canvas");

canvas.toBlob((blob) => {
  let img = new Image();
  img.onload = () =>  URL.revokeObjectURL(img.src);  // no longer need to read the blob so it's revoked
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img);
});