HTML 캔버스에서 픽셀 데이터에 액세스

HTML 캔버스 객체 내에서 특정 픽셀의 색상을 검색할 수 있습니까? 예, Canvas API에서 제공하는 다양한 방법을 사용하여 HTML Canvas의 픽셀 데이터에 액세스하고 조작할 수 있습니다.

픽셀 색상 가져오기

픽셀 색상을 검색하려면 캔버스 내의 특정 위치를 지정하려면 getImageData() 메서드를 사용할 수 있습니다. 이 메서드는 캔버스의 일부를 나타내는 ImageData 개체를 반환합니다. ImageData 객체에는 .data 속성을 사용하여 액세스할 수 있는 픽셀 데이터 배열이 포함되어 있습니다.

픽셀 조작

픽셀 데이터를 얻은 후에는 조작할 수 있습니다. 원하는대로. 예를 들어, 각 픽셀을 회색 음영으로 변환하여 회색조 이미지를 만들 수 있습니다.

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and convert it to grayscale.
for (var i = 0, n = pix.length; i < n; i  = 4) {
  var gray = (pix[i]   pix[i 1]   pix[i 2]) / 3;
  pix[i  ] = gray;
  pix[i 1] = gray;
  pix[i 2] = gray;
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

getImageData() 및 putImageData() 메서드를 활용하면 이미지 필터링, 색상 조정, HTML에 효과 만들기 등 다양한 픽셀 조작 작업을 수행할 수 있습니다. 캔버스.