概述

JS 中可以操作 ImageData 對象，它表示一個圖片，由像素值構成的對象。

可以直接通過 ImageData 對象操縱像素數據，直接讀取或將數據數組寫入該對象中。

ImageData 對象

ImageData對象中存儲著canvas對象真實的像素數據，它包含以下幾個只讀屬性：

• width 圖片寬度，單位是像素
• height 圖片高度，單位是像素
• data Uint8ClampedArray類型的一維數組，包含著RGBA格式的整型數據，范圍在0至255之間（包括255）。

data屬性返回一個 Uint8ClampedArray，它可以被使用作為查看初始像素數據。

• 每個像素用4個1bytes值(按照紅，綠，藍和透明值的順序; 這就是"RGBA"格式) 來代表。
• 每個顏色值部份用0至255來代表。
• 每個部份被分配到一個在數組內連續(xù)的索引，左上角像素的紅色部份在數組的索引0位置。
  像素從左到右被處理，然后往下，遍歷整個數組。
• Uint8ClampedArray 包含高度 × 寬度 × 4 bytes數據，索引值從0到(高度×寬度×4)-1

圖例如下：

image.png