Canvas getImageData() 方法

Canvas 참조 매뉴얼

定義和用法

getImageData() 方法返回 ImageData 對象，該對象拷貝了畫布指定矩形的像素數據。

對於 ImageData 對象中的每個像素，都存在著四方面的資訊，即 RGBA 值：

  • R - 紅色 (0-255)
  • G - 綠色 (0-255)
  • B - 藍色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的，255 是完全可見的)

color/alpha 以數組形式存在，並存儲於 ImageData 對象的 data 屬性中。

추가 정보:在操作完成數組中的 color/alpha 資訊之後，您可以使用 putImageData() 方法將圖像數據拷貝回畫布上。

例子：

以下代碼可獲得被返回的 ImageData 對象中第一個像素的 color/alpha 資訊：

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

직접 시험해 보세요

추가 정보:您也可以使用 getImageData() 方法來反轉畫布上某個圖像的每個像素的顏色。

使用該公式遍歷所有的像素，並改變其顏色值：

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

（請見下面的“親自試一試”實例。）

예제

예제 1

아래 코드는 getImageData()를 사용하여 캔버스에서 지정된 사각형의 픽셀 데이터를 복사하고, putImageData()를 사용하여 이미지 데이터를 캔버스에 다시 넣습니다:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
function copy()
{
var imgData = ctx.getImageData(10, 10, 50, 50);
ctx.putImageData(imgData, 10, 70);
}

직접 시험해 보세요

추가 정보:페이지 하단에 더 많은 예제가 제공됩니다.

문법

var imgData = context.getImageData(x,y,너비,높이);

파라미터 값

파라미터 설명
x 복사 시작점의 왼쪽 상단 위치의 x 좌표
y 복사 시작점의 왼쪽 상단 위치의 y 좌표
너비 복사할 사각형 영역의 너비
높이 복사할 사각형 영역의 높이

더 많은 예제

예제 2

사용할 이미지:

푸리푸리

getImageData()를 사용하여 캔버스 위의 이미지의 각 픽셀의 색상을 반전합니다.

您的浏览器不支持HTML5 canvas标签。

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("tulip");
ctx.drawImage(img, 0, 0);
var imgData=ctx.getImageData(0, 0, c.width, c.height);
// 색상 반전
for (var i=0; i<imgData.data.length; i+=4)
  {
  imgData.data[i] = 255 - imgData.data[i];
  imgData.data[i+1] = 255 - imgData.data[i+1];
  imgData.data[i+2] = 255 - imgData.data[i+2];
  imgData.data[i+3] = 255;
  }
ctx.putImageData(imgData, 0, 0);

직접 시험해 보세요

브라우저 지원

표의 숫자는 이 특성을 최초로 완전 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.

Canvas 참조 매뉴얼