100*100的 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。

声明

这里的答案并不一定准确。

关于 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python,获取用户输入,并且将输入的内容写到.txt

该功能缺点是必须保证该文件不存在的情况才会成功 fopen(E:/mywork/保存文件.txt,x)def userwrite(code):if codew:f.close()return Falseelse:f.writelines(code\n)return True isbool True count 0 while isbool:codeif count0:code input("请输入内容:\n…

1t硬盘怎么分区最好_这下尴尬了,电脑硬盘分区常见误区,移动硬盘分区方法...

大家买了新电脑硬盘要不要分区呢?像以往咱们买了新电脑一般会分4个区,C、D、E、F,方便更合理的分类使用,比如把工作放为D盘,娱乐影音放为E盘,游戏放为F盘,C盘为系统盘。不过渐渐地发现&#xff…

matlab仿真环境,高低温环境模拟系统MATLAB仿真研究

1] Sadoun B. Applied system simulation:a review study[J] Information Sciences, 2000, 124:173~192[2] 王子介,Krauss G. 热交换器的微元模拟法及求解[J] 制冷学报, 2000,(1):33~39 Wang Zijie,Krauss G. Unit simulation method for heat-exchanger[J] Journal of Refrige…

用Spring长轮询Tomcat

就像喜剧演员弗兰基 豪威尔 ( Frankie Howerd)所说的“哦,小姐小姐” ,但足够多的英国影射和双重诱惑,因为长轮询雄猫对隔壁的闷气不是某种性偏见,这是一种技术(或更像是一种骇客)由…

.net core 编译时报错 Package Microsoft.Composition 1.0.27 is not compatible with netcoreapp1.1

查找错误项目 通过命令行cd到项目位置&#xff0c;执行dotnet restore命令查看具体报错项目。 解决方案 去项目中找到项目解决方案.csproj > 编辑 > PropertyGroup节点 > 添加如下代码 <PropertyGroup><TargetFramework>netcoreapp1.1</TargetFramewor…

支援一波 《面试数十人有感》

戳原文 无意间看到原博主的这篇文章&#xff0c;强调基础和原理&#xff0c;略有同感。 然而却发现评论区简直 ~ 辣眼睛 ~ 比如 活在梦里的面试官 我觉着吧&#xff0c;技术迭代的这么快&#xff0c;公司更需要的是有能力、有思想解决技术问题的人&#xff0c;并不代表说基础…

exchange 删除邮件

一 批量删除特定主题的邮件1.1 批量删除所有数据库中特定主题的邮件1) 群发了几封主题为“backup”的邮件&#xff1b; 2) 当前操作账号需要满足如下需求&#xff1a; a)该账号需属于Exchange Server 管理员角色以及源服务器和目标服务器的本地 Administrator组&#xff1b; b)…

js点击取消按钮关闭当前弹框_UI设计中“取消按钮”的分析详解

按钮&#xff0c;无论是在 Web 还是 App 上都被广泛地使用&#xff0c;而很少有设计师会注意到按钮当中的细节&#xff0c;导致在设计过程中出现一些低级的错误&#xff0c;使得用户在完成任务的过程中产生阻碍&#xff0c;无法顺利达成目的。在许多优秀的产品中&#xff0c;关…

MATLAB飞机大战第二版,windows程序设计——飞机大战札记(单文档文件登陆界面)...

windows程序设计——飞机大战笔记(单文档文件登陆界面)//2015/07/21/by xbw////环境 VS 2013飞机大战做的差不多了&#xff0c;闲来无事加点高大上的东西&#xff0c;关于单文档的登陆界面&#xff1b;&#xff1b;&#xff1b;界面有点丑&#xff0c;但是足够账号登陆了&#…

吸收Mockito的流利度

我最近发现自己编写了一些代码来集成两个不同的平台。 这些系统之一是基于Java的系统&#xff0c;而另一个虽然不是用Java编写的&#xff0c;却提供了Java API。 我将这些系统分别称为Foo和Bar。 在编写一行代码之前就很明显了&#xff0c;但是&#xff0c;测试最终的适配器将…

软件工程第三次作业

题目要求 最大连续子数组和&#xff08;最大子段和&#xff09; 问题&#xff1a; 给定n个整数&#xff08;可能为负数&#xff09;组成的序列a[1],a[2],a[3],…,a[n],求该序列如a[i]a[i1]…a[j]的子段和的最大值。 当所给的整数均为负数时定义子段和为0&#xff0c;依此定义&a…

使用HTML5 IndexDB存储图像和文件

使用IndexedDB存储图像和文件 有一天&#xff0c;我们写了关于如何在localStorage中保存图像和文件的文章&#xff0c;它是关于我们今天可用的实用主义。 然而&#xff0c;localStorage有一些性能影响 - 我们将在稍后的博客中讨论这个问题 - 并且未来期望的方法是使用IndexedD…

Gitlab 项目上传

一&#xff0c;登陆gitab&#xff0c;新建reject Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private : 仓库权限&#xff08;公开共享&#xff0c;私有或指定合作者&#xff09; Initialize this repository with a README: 添加一个README.md gitig…

Java Servlet的前100个问题

1&#xff09;是“ servlets”目录还是“ servlet”目录&#xff1f; 回答&#xff1a; 对于Java Web Server&#xff1a; 在文件系统上&#xff0c;它是“ servlet” c&#xff1a;\ JavaWebServer1.1 \ servlets \ DateServlet.class 在URL路径中&#xff0c;它是“ servl…

stm32f103r6最小系统原理图_超强PCB布线设计经验谈附原理图

在当今激烈竞争的电池供电市场中&#xff0c;由于成本指标限制&#xff0c;设计人员常常使用双面板。尽管多层板(4层、6层及8层)方案在尺寸、噪声和性能方面具有明显 优势&#xff0c;成本压力却促使工程师们重新考虑其布线策略&#xff0c;采用双面板。在本文中&#xff0c;我…

[UE4GamePlay架构(九)GameInstance(转)

GameInstance这个类可以跨关卡存在&#xff0c;它不会因为切换关卡或者切换游戏模式而被销毁。然而&#xff0c;GameMode和PlayController就会再切换关卡或者游戏模式时被引擎销毁重置&#xff0c;这样他们里面的状态就不能被保存。比如&#xff0c;你想再下一个关卡中知道上一…

php+原生代码+赋值,js重新赋值原生的方法

js的原生方法被覆盖掉以后&#xff0c;如果你还没让原生方法又从新指向一个新的变量名&#xff0c;那就gg了。所以&#xff0c;关键就是怎么再获取到原生的方法。实现的原理呢就是创建一个新的window对象&#xff0c;然后从新的window对象里面获取原生的方法&#xff0c;来重新…

python基础知识 - Day4

String相关的方法&#xff1a; 1. 字符串格式化 format "hello, %s. %s enough for you" values (cloris,hot) print (format % values) 2. 字符串方法 - find() 可以在一个较长的字符串中查找子字符串。返回子串所在位置的最左端索引。如果没有找到&#xff0c;返回…

灵格斯怎么屏幕取词_电脑包尺寸怎么选?手提的好还是双肩的好?比较推荐哪款电脑包?...

在携带笔记本电脑的时候&#xff0c;一般都会用到电脑包&#xff0c;那么电脑包的尺寸该怎么选呢&#xff1f;为了能更好的装下电脑&#xff0c;电脑包的尺寸必须要比笔记本电脑的尺寸大一些&#xff0c;而不能刚刚好。笔记本的尺寸参数一般是指屏幕尺寸&#xff0c;而整个机身…

JSBridge实战

前言 H5 VS Native 一直是前端技术界争执不下的话题。react、vue等技术栈引领着纯H5开发&#xff0c;rn、week则倡导原生体验。但在项目实战中&#xff0c;经常会选择一个中立的方案&#xff1a;混合开发。大众称呼&#xff1a;Hybrid。 本人目前从事新闻类产品研发&#xff…