putimagedata詳解

一、putimagedata的概述

var imageData = ctx.getImageData(x,y,width,height);
//獲取到imageData對象
var data = imageData.data;
//data數組中保存了圖像中每個像素的信息，每個像素包含四個值（r,g,b,a）
data[index+0] = r;
data[index+1] = g;
data[index+2] = b;
data[index+3] = a;
ctx.putImageData(imageData,x,y);
//將修改後的imageData數據放回畫布中

在Canvas中，我們可以通過getImageData()方法獲取畫布指定區域的像素信息，然後修改其像素點的顏色信息，再通過putImageData()方法將修改後的數據渲染到畫布上。putImageData()方法主要是將getImageData()返回的ImageData對象放回canvas中，因此，要想了解putImageData()方法，我們首先需了解getImageData()方法。

二、getImageData()的使用

var imageData = ctx.getImageData(x,y,width,height);
var data = imageData.data;

getImageData()方法會返回ImageData對象，該對象包含一個表示指定矩形內每個像素數據的數組（data），具體參數如下：

1. x：表示要複製的矩形數據的左上角 x 坐標（相對於當前變換矩陣，而非畫面表示）
2. y：表示要複製的矩形數據的左上角 y 坐標（相對於當前變換矩陣，而非畫面表示）
3. width：矩形數據的寬度
4. height：矩形數據的高度

返回值是一個ImageData對象，其中包含了以該坐標點為左上頂點、寬和高分別為width和height的矩形範圍內每個像素的rgba四個通道信息，每個通道位於數組data中的連續四個元素中，各通道位深都為8位。由此，我們可以通過修改ImageData對象中的像素信息，從而達到修改canvas中圖像的目的。

三、putImageData()的使用

ctx.putImageData(imageData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

putImageData()方法將圖像數據放回畫布上，並可指定放回的位置和區域範圍，具體參數如下：

1. imageData：要返回畫布中的ImageData對象
2. x：在畫布上放置圖像的左上角 x 坐標
3. y：在畫布上放置圖像的左上角 y 坐標
4. dirtyX：起始像素點的x坐標，默認為0
5. dirtyY：起始像素點的y坐標，默認為0
6. dirtyWidth：在x方向上繪製的像素點個數，默認為ImageData對象的寬度
7. dirtyHeight：在y方向上繪製的像素點個數，默認為ImageData對象的高度

需要注意的是，如果dirtyWidth和dirtyHeight未指定，那麼將使用imageData對象的width和height屬性。

四、putImageData()與getImageData()的結合使用

var imageData = ctx.getImageData(x,y,width,height);
var data = imageData.data;
for (var i = 0; i < data.length; i+=4) {
  var r = data[i+0];
  var g = data[i+1];
  var b = data[i+2];
  var a = data[i+3];
  // 修改像素點信息
  data[i+0] = r + 10; // r值+10
  data[i+1] = g - 20; // g值-20
  data[i+2] = b * 1.5; // b值*1.5
  data[i+3] = a * 0.5; // a值*0.5
}
ctx.putImageData(imageData, x, y);

上述代碼中，將獲取的imageData對象中的每一個像素rgb值進行了修改，並將修改後的結果通過putImageData()方法重新渲染到畫布上。

五、總結

putImageData()與getImageData()是Canvas最常用的兩個API，它們可以用來實現複雜效果的圖形生成，如拾色器、特效等。雖然這兩個方法的使用比較靈活，但我們必須了解它們的基本使用方法，才能更好地使用Canvas進行開發。