canvas createImageData()

admin發表於2019-08-26
Canvas

createImageData方法可以建立一個ImageData物件。

ImageData物件儲存著關於canvas圖片的畫素資訊。

更多關於ImageData內容參閱canvas ImageData 物件一章節。

語法結構一：

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

引數解析：

（1）.width：規定ImageData物件的寬度。

（2）.height：規定ImageData物件的高度。

語法結構二：

[JavaScript] 純文字檢視 複製程式碼
let imgData=context.createImageData(imageData);

引數解析：

（1）.imageData：ImageData物件，建立與指定的ImageData 物件尺寸相同的新ImageData物件。

特別說明：語法結構二雖然引數是一個ImageData 物件，但是並不會複製影像資料。

瀏覽器相容：

（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;
  }
  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/165134r8w4e8twtntt9tw4.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面程式碼的核心部分進行一下簡單分析，建議首先閱讀canvas ImageData data 屬性一章節。

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

imgData物件包含影像資訊，上述程式碼建立一個imgData物件，規定影像的長寬分別是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迴圈具體規定影像中每一個畫素的資訊。

陣列中每四個成員表示一個畫素資訊，所以100x100個畫素需要40000個陣列成員表示。

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

最後通過putImageData()方法將影像繪製於畫布之上。

[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);
  ctx.putImageData(imgData,10,10);
  console.log(imgData.data);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器不支援canvas標籤</canvas>
</body>
</html>

經過執行之後，你可以沒有在畫布上繪製任何東西。

其實這是一種錯覺，因為繪製了一個全透明的圖案，你自然什麼都看不到。

看控制檯列印資訊：

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

可以看到資料全是0，也就是說RGB是(0,0,0)，alpha通道值是0。

也就是繪製的是黑色全透明團，在視覺上當然好像什麼都沒有一樣。

[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;
  }
  let newImgData=ctx.createImageData(imgData);
  ctx.putImageData(newImgData,10,10);
  console.log(newImgData.data);
}
</script>
</head>
<body>
<canvas id="ant">當前瀏覽器canvas標籤</canvas>
</body>
</html>

上述程式碼好像也沒有在畫布上繪製出任何資訊。createImageData()方法的引數是一個imgData物件。

第一個imgData物件可以在畫布上繪製一個紅色的矩形，在本文第一段例項已經演示。

但是它作為createImageData()方法的引數，卻不能在畫布上繪製出任何影像。

事實上，在畫布上繪製了一個圖案，但是它是全透明的，如果引數是一個imgData物件。

新建立的imgData物件，只會繼承原來imgData物件的width和height，畫素資訊會丟失，預設黑色和透明填充。

上述程式碼控制檯列印資訊如下：

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

上述圖片的列印資訊說明了一切，不再重複。

相關文章