前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >知识:ImageData 对象

知识:ImageData 对象

作者头像
张云飞Vir
发布2021-04-29 15:16:28
6190
发布2021-04-29 15:16:28
举报
文章被收录于专栏:写代码和思考

概述

JS 中可以操作 ImageData 对象,它表示一个图片,由像素值构成的对象。

可以直接通过 ImageData 对象操纵像素数据,直接读取或将数据数组写入该对象中。

ImageData 对象

ImageData对象中存储着canvas对象真实的像素数据,它包含以下几个只读属性:

  • width 图片宽度,单位是像素
  • height 图片高度,单位是像素
  • data Uint8ClampedArray类型的一维数组,包含着RGBA格式的整型数据,范围在0至255之间(包括255)。

data属性返回一个 Uint8ClampedArray,它可以被使用作为查看初始像素数据。

  • 每个像素用4个1bytes值(按照红,绿,蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。
  • 每个颜色值部份用0至255来代表。
  • 每个部份被分配到一个在数组内连续的索引,左上角像素的红色部份在数组的索引0位置。 像素从左到右被处理,然后往下,遍历整个数组。
  • Uint8ClampedArray 包含高度 × 宽度 × 4 bytes数据,索引值从0到(高度×宽度×4)-1

图例如下:

image.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 概述
  • ImageData 对象
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档