100*100的 canvas 占多少内存？

时间 2019-11-06

标签 canvas 多少内存繁體版

原文原文链接

原文发自个人github博客前端

题目

100*100的 canvas 占多少内存？git

在三年前端，面试思考中提到了一个题目，很是有新意，这里分享一下当时面试的思考过程。github

解题思路

其实真正的答案是多少我并不清楚，面试过程当中面试官也不期待一个准确的答案，而是看你的思考过程。面试

若是了解过 Canvas 且作过滤镜相关的工做，可能调用过 imageData = ctx.getImageData(sx, sy, sw, sh); 这个 API。我记得这个 API 返回的是一个 ImageData 数组，包含了 sx, sy, sw, sh 表示的矩形的像素数据。canvas

并且这个数组是 Uint8 类型的，且四位表示一个像素。数组

我在面试的时候只能想起来这些信息。猜测一下，咱们在定义颜色的时候就是使用 rgba(r,g,b,a) 四个维度来表示，并且每一个像素值就是用十六位 00-ff 表示，即每一个维度的范围是 0~255，即 2^8 位，即 1 byte, 也就是 Uint8 能表示的范围。post

因此 100 * 100 canvas 占的内存是 100 * 100 * 4 bytes = 40,000 bytes。3d

声明

这里的答案并不必定准确。code

关于 alpha 的争论

有同窗指出，alpha 不是 0-100 么？我起初也有这样的疑问，不过这篇文章中 developer.mozilla.org/en-US/docs/… 说component

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

招人

蚂蚁金服-微贷事业群招前端能够发简历到 yanqi.zyq@antfin.com 邮件标题：简历-姓名-前端附上你的简历