canvas ImageData data 屬性

admin發表於2019-08-26

ImageData物件用於儲存影象的資訊。

canvas中的影象是由畫素構成,ImageData的data屬性用於儲存畫素的相關資訊。

data屬性返回值是一個陣列,用於儲存構成影象的畫素相關資訊。

可讀寫屬性,也就是說可以人為編輯影象的畫素資訊。

ImageData物件中的每個畫素,都存在著四方面資訊,即RGBA值:

R - 紅色(0-255)

G - 綠色(0-255)

B - 藍色(0-255)

A - alpha 通道(0-255; 0 是透明的,255 是完全可見的)。

假設ImageData物件中只有兩個畫素,那麼data屬性返回的陣列形式如下:

[JavaScript] 純文字檢視 複製程式碼
[255, 0, 0, 255, 255, 0, 0, 255]

程式碼分析如下:

(1).陣列的長度是8,但只能描述兩個畫素點。

(2).每一個畫素點是通過RGB加alpha透明度來描述的。

(3).一個畫素點用四位描述。

(4).上述程式碼中兩個畫素點都是紅色,且完全不透明。

瀏覽器相容:

(1).IE9+瀏覽器支援此屬性。

(2).edge瀏覽器支援此屬性。

(3).谷歌瀏覽器支援此屬性。

(4).火狐瀏覽器支援此屬性。

(5).Opera瀏覽器支援此屬性。

(6).Safari瀏覽器支援此屬性。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas{
  border:1px solid #d3d3d3;
  width:300px;
  height:150px;
}
</style>
<script>
window.onload = () => {
  let cvs=document.getElementById("ant");
  let ctx=cvs.getContext("2d");
  let imgData=ctx.createImageData(100,100);
  for (let i=0;i<imgData.data.length;i+=4){
    imgData.data[i+0]=255;
    imgData.data[i+1]=0;
    imgData.data[i+2]=0;
    imgData.data[i+3]=255;
  }
  console.log(imgData.data);
  console.log(imgData.data.length);
  ctx.putImageData(imgData,10,10);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

程式碼執行效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/26/154129qxxpi2g04q4ozg12.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼繪製了一個100x100的紅色矩形圖案,完全不透明。

主要核心程式碼分析如下:

[JavaScript] 純文字檢視 複製程式碼
let imgData=ctx.createImageData(100,100)

上述程式碼可以建立一個儲存著影象資訊的ImageData物件。

影象的寬度和高度分別是100畫素。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
for (let i=0;i<imgData.data.length;i+=4){
    imgData.data[i+0]=255;
    imgData.data[i+1]=0;
    imgData.data[i+2]=0;
    imgData.data[i+3]=255;
  }

上述程式碼通過for迴圈具體對影象的每一個畫素進行操作。

由於每一個畫素是通過四個陣列元素進行表示,所以小括號最後是i+=4。

由此我們也可以得出陣列的長度是影象畫素數目的四倍。

[JavaScript] 純文字檢視 複製程式碼
console.log(imgData.data);
console.log(imgData.data.length);

在谷歌控制檯列印一下相關資料資訊,圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201908/26/154256lhc178r97re9ijc6.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

陣列長度是40000,上述圖片無法擷取全部資訊,大家可以自行測試。

[JavaScript] 純文字檢視 複製程式碼
ctx.putImageData(imgData,10,10);

上述程式碼可以通過putImageData方法將ImageData物件包含的影象資訊繪製在畫布之上。

於是我們就看到了一個100x100純紅色不透明的矩形圖案。

相關文章