100*100的 canvas 佔多少內存？

原文發自個人github博客

題目

100*100的 canvas 佔多少內存？

在 三年前端，面試思考 中提到了一個題目，很是有新意，這裏分享一下當時面試的思考過程。

解題思路

其實真正的答案是多少我並不清楚，面試過程當中面試官也不期待一個準確的答案，而是看你的思考過程。

若是瞭解過 Canvas 且作過濾鏡相關的工做，可能調用過 imageData = ctx.getImageData(sx, sy, sw, sh); 這個 API。我記得這個 API 返回的是一個 ImageData 數組，包含了 sx, sy, sw, sh 表示的矩形的像素數據。

並且這個數組是 Uint8 類型的，且四位表示一個像素。

我在面試的時候只能想起來這些信息。猜測一下，咱們在定義顏色的時候就是使用 rgba(r,g,b,a) 四個維度來表示，並且每一個像素值就是用十六位 00-ff 表示，即每一個維度的範圍是 0~255，即 2^8 位，即 1 byte, 也就是 Uint8 能表示的範圍。

因此 100 * 100 canvas 佔的內存是 100 * 100 * 4 bytes = 40,000 bytes。

聲明

這裏的答案並不必定準確。

關於 alpha 的爭論

有同窗指出，alpha 不是 0-100 麼？我起初也有這樣的疑問，不過這篇文章中 developer.mozilla.org/en-US/docs/… 說

The data property returns a Uint8ClampedArray which can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "RGBA" format). Each color component is represented by an integer between 0 and 255.

也就是說即使是 alpha 也是 0-255

那麼如何表示 alpha 呢？

接下來這段代碼中

能夠看出，只須要用 0-255 表示 0-100 就能夠啦~

參考資料

CanvasRenderingContext2D.getImageData() 返回一個ImageData對象，用來描述canvas區域隱含的像素數據，這個區域經過矩形表示，起始點爲(sx, sy)、寬爲sw、高爲sh。

Uint8ClampedArray 描述了一個一維數組，包含以 RGBA 順序的數據，數據使用 0 至 255（包含）的整數表示。

• developer.mozilla.org/zh-CN/docs/…
• developer.mozilla.org/zh-CN/docs/…
• developer.mozilla.org/en-US/docs/…

招人

螞蟻金服-微貸事業羣招前端 能夠發簡歷到 yanqi.zyq@antfin.com 郵件標題：簡歷-姓名-前端 附上你的簡歷