html5 Canvas getImageData或toDataURL的结果 - 哪个占用更多内存？

Question

我的应用程序的一部分包括使用标准的2d上下文画布和webGL的混合的html5照片编辑.

无论如何,当用户操纵他们的照片时,我正在保存"撤消"状态.这些都作为base64图像数据存储在Javascript对象中.

一切都很好,性能也很好.

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

总结一下我的问题是:

这需要更多的内存空间,toDataURL()生成的base64 jpeg或getImageData()的结果？两者之间是否有任何性能差异(关于加载到画布上,以及从画布中提取数据)

提前致谢.

Answer 1

getImageData()占用的内存多于toDataURL()

• ImageData是像素阵列,关于图像的最大信息,像素阵列的长度是widthOfImage * heightOfImage * 4,例如图像尺寸为100的图像的长度是var imageDataArrayLenth = 100 * 100 * 4 = 40 000 (bytes);
• BLOB(JPG或PNG)是使用jpg或png算法压缩的imageData,其尺寸可以比imageData小10或20倍(取决于图像内容).
• DataURL(BASE64)将imageData压缩为JPG或PNG,然后转换为字符串,此字符串比BLOB 大37%(info).

结论:更好的方法是使用BLOB(info).

//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);
});

Answer 2

好问题!我不确定对象本身的真实大小,它应该在JS的实现之间有所不同,但这并不意味着我们不能做出一些有根据的猜测.

首先,我们可以使用此问题的近似函数:JavaScript对象大小

举个例子:http://jsfiddle.net/g39uz/

字符串可能是80116字节,与ImageData的720056字节相比.或者左右.

这里有一个数量级的差异,如果图像很简单,差异会更加明显.值得记住的是,Base64表示可以被压缩(并且它是).让我们通过使用空白画布将它带到极限片刻:

http://jsfiddle.net/g39uz/2/

在空白画布上,dataURL字符串只是1996字节(或左右),但图像数据,当然仍然尽职尽责地描述了艰苦阵列细节中的每一个像素,仍然是720056.

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