概述
JS 中可以操作 ImageData 對象，它表示一個(gè)圖片瘟檩，由像素值構(gòu)成的對象抹缕。
可以直接通過 ImageData 對象操縱像素?cái)?shù)據(jù)，直接讀取或?qū)?shù)據(jù)數(shù)組寫入該對象中墨辛。
ImageData 對象
ImageData對象中存儲著canvas對象真實(shí)的像素?cái)?shù)據(jù)卓研，它包含以下幾個(gè)只讀屬性：
- width 圖片寬度，單位是像素
- height 圖片高度睹簇，單位是像素
- data Uint8ClampedArray類型的一維數(shù)組奏赘，包含著RGBA格式的整型數(shù)據(jù)，范圍在0至255之間（包括255）太惠。
data屬性返回一個(gè) Uint8ClampedArray磨淌，它可以被使用作為查看初始像素?cái)?shù)據(jù)。
- 每個(gè)像素用4個(gè)1bytes值(按照紅凿渊，綠梁只，藍(lán)和透明值的順序; 這就是"RGBA"格式) 來代表。
- 每個(gè)顏色值部份用0至255來代表埃脏。
- 每個(gè)部份被分配到一個(gè)在數(shù)組內(nèi)連續(xù)的索引搪锣，左上角像素的紅色部份在數(shù)組的索引0位置。
像素從左到右被處理彩掐，然后往下构舟，遍歷整個(gè)數(shù)組。 - Uint8ClampedArray 包含高度 × 寬度 × 4 bytes數(shù)據(jù)佩谷，索引值從0到(高度×寬度×4)-1
圖例如下：
image.png
