題目

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 么？我起初也有這樣的疑問，不過這篇文章中 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas 說

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（包含）的整數表示。

• https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData
• https://developer.mozilla.org/zh-CN/docs/Web/API/ImageData
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas

總結

以上是生活随笔為你收集整理的100*100的 canvas 占多少内存？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。