html5 Canvas getImageData或toDataURL的结果 - 哪个占用更多内存？ [英] Result of html5 Canvas getImageData or toDataURL - Which takes up more memory?
问题描述
我的应用程序的一部分包括使用标准的2d上下文画布和webGL混合的html5照片编辑。
Part of my app includes html5 photo editing using a mixture of standard 2d context canvases and webGL.
无论如何，我在保存'撤消'状态，而用户是操纵他们的照片。这些都作为base64图像数据存储在Javascript对象中。
Anyway, I am saving 'undo' states while the user is manipulating their photo. These are all stored in a Javascript object as base64 image data.
一切正常，性能良好。
但是我想知道从getImageData存储数据是否会占用更少的内存或提供更好的性能？
However I am wondering if storing the data from getImageData might take up less memory or offer better performance?
所以总结一下我的问题是：
So to summarise my question is:
内存中占用的空间是多少，toDataURL（）生成的base64 jpeg还是getImageData（）的结果？两者之间是否有任何性能差异（关于加载到画布上，并从画布中提取数据）
Which takes more space in memory, a base64 jpeg generated by toDataURL() or the result of getImageData()? And are there any performance differences between the two (with regards to loading onto a canvas, and pulling the data off of a canvas)
提前致谢。
推荐答案
好问题！我不确定对象本身的真实大小，它应该在JS的实现之间有所不同，但这并不意味着我们不能做出一些有根据的猜测。
Good question! I'm not sure about the true sizes of the objects themselves, and it should differ between implementions of JS, but that doesn't mean we can't make some educated guesses.
首先，我们可以使用此问题的近似函数： JavaScript对象大小
First we can use the approximation function from this question: JavaScript object size
并举个例子： http://jsfiddle.net/g39uz/
字符串可能是80116字节，与ImageData的720056字节相比。或者左右。
The string is perhaps 80116 bytes, compared to the ImageData's 720056 bytes. Or thereabouts.
这里存在一个数量级的差异，如果图像很简单，差异会更加明显。值得记住的是，Base64表示可以被压缩（并且它是）。让我们通过使用空白画布将它带到极限片刻：
There's an order of magnitude difference here, and the difference would be even more stark if the image was simple. It's worth remembering that the Base64 representation can be compressed (and it is). Let's take it to the limit for a moment to see, by using a blank canvas:
在空白画布上，dataURL字符串仅为1996字节（或左右）但图像数据，当然仍然尽职尽责地描述了刻薄的阵列细节中的每一个像素，仍然是720056。
On a blank canvas the dataURL string is just 1996 bytes (or thereabouts) but the image data, which of course still dutifully describes every single pixel in painstaking array detail, is still 720056.
简而言之，如果你要存储它，base64字符串可能占用更少的空间。一个数量级。
In short, if you're storing it, the base64 string probably takes up less space. By an order of magnitude.
这篇关于html5 Canvas getImageData或toDataURL的结果 - 哪个占用更多内存？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
