100*100的 canvas 佔多少記憶體？
摘要：
100*100的 canvas 佔多少記憶體？
在三年前端，面試思考 中提到了一個題目，非常有新意，這裡分享一下當時面試的思考過程。
解題思路
其實真正的答案是多少我並不清楚，面試過程中面試官也不期待一個準確的答案，而是看你的思考過程。
如果瞭解過 Canvas 且做過...
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。