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

Question

我的部分应用包括混合使用标准 2d 上下文 Canvas 和 webGL 的 html5 照片编辑。

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

一切正常，性能良好。

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

总结一下我的问题是:

toDataURL() 生成的 base64 jpeg 或 getImageData() 的结果哪个占用更多内存空间？两者之间是否存在任何性能差异(关于加载到 Canvas 上，以及从 Canvas 上拉出数据)

提前致谢。

Answer 1

getImageData() 比 toDataURL() 占用更多内存

• ImageData是像素数组，是图像最大的信息，像素数组的长度是widthOfImage * heightOfImage * 4，例如100维图像的imageData长度是var imageDataArrayLenth = 100 * 100 * 4 = 40 000(字节)；
• BLOB(JPG 或 PNG) 是使用 jpg 或 png 算法压缩的图像数据，其大小可以比图像数据小 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);
});