canvas getImageData()

admin發表於2018-09-13
Canvas
此方法可以返回一個ImageData物件，該物件包含畫布指定矩形區域的畫素資料。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
var imgData=context.getImageData(x,y,width,height);

引數解析:

（1）.x:必需，開始複製的左上角位置的 x 座標。

（2）.y:必需，開始複製的左上角位置的 y 座標。

（3）.width:必需，將要複製的矩形區域的寬度。

（4）.height:必需，將要複製的矩形區域的高度。

返回的ImageData物件的結構如下:

[JavaScript] 純文字檢視 複製程式碼
ImageData { width=10, height=10, data=Uint8ClampedArray}

width和height就是獲取矩形區域的尺寸。

data是一個陣列，它包含了每一個畫素的資訊；每一個畫素具有RGBA值:

（1）.R - 紅色 (0-255)

（2）.G - 綠色 (0-255)

（3）.B - 藍色 (0-255)

（4）.A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)

data中又是如何儲存畫素陣列的呢，最符合常理的情況是，data是一個二維陣列，它的每一個陣列元素包含一個畫素的資訊，然而事實並非如此，data的元素始終依次是red,green,blue,alpha,red,green,blue,alpha一直這樣重複下去，直到結束。

第一個畫素的資料具體如下:

[JavaScript] 純文字檢視 複製程式碼
red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

那麼第二個畫素的資料就是這樣的:

[JavaScript] 純文字檢視 複製程式碼
red=imgData.data[4];
green=imgData.data[5];
blue=imgData.data[6];
alpha=imgData.data[7];

data陣列的大小由畫素個數決定，ImageData的width*height.如getImageData(1,1,1,1)，那data就只有一個畫素資訊；而getImageData(1,1,10,10)，則有10*10=100個。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
  margin: 5px;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(10, 10, 50, 50);
  function copy() {
    var imgData = ctx.getImageData(10, 10, 50, 50);
    ctx.putImageData(imgData, 10, 70);
  }
  obt.onclick = function () {
    copy();
  }
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="150"></canvas><br/>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了影像的拷貝功能，下面再看一個更加複雜一點的。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
canvas {
  border: 2px dotted #ccc;
}
</style>
<script>
window.onload = function () {
  var cvs = document.getElementById("canvas");
  var img = document.getElementById("ant");
  var obt = document.getElementById("bt");
  var ctx = cvs.getContext("2d");
  obt.onclick = function () {
    ctx.drawImage(img, 0, 0);
    var imgData = ctx.getImageData(0, 0, cvs.width, cvs.height);
    // 反轉顏色
    for (var index = 0; index < imgData.data.length; index += 4) {
      imgData.data[index] = 255 - imgData.data[index];
      imgData.data[index+ 1] = 255 - imgData.data[index+ 1];
      imgData.data[index+ 2] = 255 - imgData.data[index+ 2];
      imgData.data[index+ 3] = 255;
    }
    ctx.putImageData(imgData, 0, 0);
  }
}
</script>
</head>
<body>
<img id="ant" src="mytest/demo/cite.jpg"><br/>
<canvas id="canvas" width="738" height="280"></canvas><br/>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼實現了圖片的反色效果。

相關文章