canvas ImageData.data 屬性

admin發表於2019-08-26
Canvas

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純紅色不透明的矩形圖案。

相關文章