专栏首页脑洞前端100 * 100 Canvas 占用内存多大

100 * 100 Canvas 占用内存多大

题目描述

一个 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>

这里是渲染结果:

点击之后,控制台的显示结果:

204 就是 255 * 0.8 算出来的

可以看出其实像素信息使用 Uint8 来存储的,数组长度为 4, Uint8 占用内存为 1 个字节, 因此一共是 4 个字节,所以答案就是一个像素的 Canvas 占内存是4Byte。这个和我们的猜测31Bit相差了1Bit,其实多这1bit也是为了方便操作。

这道题还没有完~

RGB,RGBA 等等表示法有什么本质区别

我们刚才的推测以及实验都是基于特定的颜色表示方法,比如 RGBA 或者#(六位十六进制)的形式, 如果我们采用别的方式呢?比如之前的 24 位,即 RGB 表示法。那结果就是100 * 100 *3, 如果一个颜色不用一个字节,而是更多或者更少的字节呢?这些都会影响到结果。

因此上面我们的猜测以及“结论”都不确切,更确切地说占用多少内存完全取决于你如何对像素进行编码和解码,只有掌握这个根本点,才能无往而不利。

总结

我们先从感性认识来“猜测”了一下问题的答案,然后通过 Canvas 的内置 API 实际地检测了一下我们的猜想, 但是这个猜想似乎并不是很严谨,换句话说我们的猜想以及验证结果是有一定的前提条件的。

其实答案不重要,重要的是你看到这种问题的思维过程,这种题目很容易看出一个人的知识广度和深度, 甚至思维能力。本文完~

本文分享自微信公众号 - 脑洞前端(fe_lucifer),作者:一个脑洞很大的程序员

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android给scrollView截图超过屏幕大小形成长图

    很多的时候,我们想要分享一个界面的所有内容,可是内容太多,超过了屏幕的大小,简单的截屏已经满足不了我们的需要,这时候我们就可以根据布局里scrollView的高...

    砸漏
  • Android应用性能优化——内存优化(内附一个内存泄露优化实例)

    自动管理内存和回收机制,垃圾回收器负责回收程序中已经不使用,但是仍然被各种对象占用的内存,将程序员从繁重、危险的内存管理工中解放出来。

    trampcr
  • 一条SQL能占多大内存?

    初学计算机时,我经常琢磨的一个问题是:一个进程到底能吃多大内存,能把系统内存吃完?

    Lenis
  • Android关于Canvas你所知道的和不知道的一切

    Picture相当于先拍一张照片,并且是在别的Canvas上,在别的Canvas上,在别的Canvas上! 重要的话说三遍:当需要的时候在贴在当前的canva...

    张风捷特烈
  • 一个Java对象到底占用多大内存

    大家可以用这个代码边看边验证,注意的是,运行这个程序需要通过javaagent注入Instrumentation,具体可以看原博客。我今天主要是总结下手动计算J...

    哲洛不闹
  • 一个Java对象到底占用多大内存

    大家可以用这个代码边看边验证,注意的是,运行这个程序需要通过javaagent注入Instrumentation,具体可以看原博客。我今天主要是总结下手动计算J...

    哲洛不闹
  • 一个Java对象到底占用多大内存?

    最近在调研MAT和VisualVM源码实现,遇到一个可疑问题,两者计算出来的对象大小不一致,才有了这样疑惑。

    乔戈里
  • 解决canvas在高清屏中绘制模糊的问题

    因为 canvas 不是矢量图,而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏,浏览器就会以 2 个像素点的宽度来...

    pingan8787
  • apache占用过多内存问题

    很多web服务会选用Apache作为服务器软件。但对于物理内存不是很大的服务器来说,会有一个问题,就是Apache长时间运行,httpd进程会越来越大,占用过高...

    震八方紫面昆仑侠
  • 【Canvas】311- 解决 canvas 在高清屏中绘制模糊的问题

    因为 canvas 不是矢量图,而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏,浏览器就会以 2 个像素点的宽度来...

    pingan8787
  • Day 3 学习Canvas这一篇文章就够了

    一、canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来...

    IT人一直在路上
  • 通过canvas计算任意两个颜色的插值

    通过canvas可以协助我们做很多颜色计算的辅助,比如颜色转换,渐变颜色计算。本文着重讲解渐变计算颜色的插值计算。

    用户3158888
  • 第155天:canvas(二)

    ​ 这个属性影响到 canvas 里所有图形的透明度,有效的值范围是 0.0 (完全透明)到 1.0(完全不透明),默认是 1.0。

    半指温柔乐
  • Silverlight:利用Panel实现自定义布局

    虽然Silverlight提供了几种基本的布局方式,比如Canvas,Grid,StackPanel,Border...,但有时候可能仍然会觉得不够用。 这时候...

    菩提树下的杨过
  • Android关于Color你所知道的和不知道的一切

    张风捷特烈
  • Android--Camera基本用法

    aruba
  • 【优化】949- 你必须知道的图片性能优化方式

    前言:其实图片优化网上有非常多的方案,这份初探里面做的更多的是从不同方向进行的探索~

    pingan8787
  • Bitmap优化详解

    一张图片Bitmap所占用的内存 = 图片长度 x 图片宽度 x 一个像素点占用的字节数

    大发明家
  • 烧脑!JS+Canvas 带你体验「偶消奇不消」的智商挑战

    看似简单却具有极大的挑战性和趣味性,这就是其魅力所在!温馨提示,体验后再阅读此文体验更佳哦!

    苏南

扫码关注云+社区

领取腾讯云代金券