100*100的 canvas 佔多少記憶體？

小魚二發表於2018-11-04
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 呢？

接下來這段程式碼中

100*100的 canvas 佔多少記憶體？

可以看出，只需要用 0-255 表示 0-100 就可以啦~

參考資料

CanvasRenderingContext2D.getImageData() 返回一個ImageData物件，用來描述canvas區域隱含的畫素資料，這個區域通過矩形表示，起始點為(sx, sy)、寬為sw、高為sh。

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

招人

100*100的 canvas 佔多少記憶體？

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

相關文章