HTML 캔버스에서 픽셀 데이터에 액세스하고 조작하는 방법은 무엇입니까?

HTML Canvas에서 픽셀 데이터 액세스

HTML Canvas 객체 내에서 특정 픽셀의 색상을 검색할 수 있습니까? 예, 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 캔버스에서 이미지 필터링, 색상 조정 및 효과 생성.

위 내용은 HTML 캔버스에서 픽셀 데이터에 액세스하고 조작하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!