100 * 100 Canvas 占用内存多大

lucifer210

发布于 2019-08-28 16:20:00

3.9K0

发布于 2019-08-28 16:20:00

文章被收录于专栏：脑洞前端

题目描述

一个 100 * 100 Canvas 占用内存多大，它的大小的决定因素是什么？这里我们只考虑存储这么多像素的内存，不考虑运算过程中使用的内存。

感性认识

我们知道 Canvas 给了我们前端像素级别控制的能力，我们可以精确到像素，因此多了更多的灵活性和复杂度。可以说 Canvas 的模型和传统的 DOM 模型有很大的不同。

那么要回答这个问题，我们其实只要知道 1 * 1 像素占用多大内存就好了。

那么 1 * 1 像素的 Canvas 占用多大像素呢？我们来感性思考一下，我们现在前端在写颜色的时候，很多都是用RGBA或者#(六位十六进制)的形式, 对于 RGBA 我们可以怎么存储？A 的话，我们平时的取值范围 0 - 1 的小数，步长为 0.01,因此 100 个数字就够了，7Bit 就可以搞定。

那么 RGB 呢？如果你用过 RGB 或者 RGBA 的话，应该知道我们通常使用的范围是 0-255 的范围，因此 RGB 的存储空间应该是 8*3 = 24 Bit，也就是 3Byte。

如果使用十六进制表示呢？一个十六进制需要 4 个 bit，那么 6 个十六进制就是 24 个 bit，也就是 3Byte，和 RGBA 是一样的。

因此一个像素的 Canvas 占据空间理论上是 31Bit。那么事实上是这样么？

什么是 ImageData

回答这个问题之前，我先来介绍一个 Canvas 的 API getImageData, 这个方法会返回一个 ImageData，它用来描述"canvas"元素的一个隐含像素数据的区域。使用 ImageData() 构造函数创建或者使用和 canvas 在一起的 CanvasRenderingContext2D 对象的创建方法：createImageData() 和 getImageData()。我们这次就使用getImageData().

我们来实际测试一下

先说结果，结果是一个像素的 Canvas 占内存是4Byte。

我做了一个实验，具体是怎么做的呢？我们一起来看一下。

下面是我写的一个HTML结构，里面放了一个Canvas和一个button，点击button会打印出来一个像素的信息。

这里是代码：

<!DOCTYPE html>
<html>
  <body>
    <canvas id="myCanvas" width="300" height="150">
      Your browser does not support the HTML5 canvas tag.
    </canvas>

    <script>
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "rgba(200,2,2,0.8)";
      ctx.fillRect(10, 10, 50, 50);

      function getImageData() {
        var imgData = ctx.getImageData(10, 10, 1, 1);
        console.log(imgData);
        return imgData;
      }
    </script>

    <button onclick="getImageData()">获取1像素信息</button>
  </body>
</html>

这里是渲染结果：