캔버스의 Vanilla JavaScript 이미지

캔버스 탐색의 또 다른 날, 오늘은 캔버스에서 이미지를 사용하는 방법을 살펴보겠습니다.
getImageData 함수를 사용하여 이미지를 읽고 픽셀 데이터를 복사하는 imageData 객체를 반환합니다.

각 픽셀에 대해 rgba 값을 얻습니다.

오늘 우리는 이미지에서 이러한 값을 가져와 반전시키는 방법을 탐구할 것입니다.

최종 결과는 이 Codepen입니다.



다음 링크에서 캔버스 수정에 대한 다른 기사를 찾을 수 있습니다.

Getting started with Canvas

Save canvas as image

Colouring our canvas elements

이미지를 추가하는 캔버스

새 이미지를 렌더링할 이미지와 캔버스가 있도록 먼저 HTML 구조를 설정해 보겠습니다.

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1600016358126/bMK5IddO3.jpeg" id="eeveelutions" />
<canvas id="canvas" width="200" height="200">

이제 200x200 크기의 이미지와 이번 연습을 위해 동일하게 만든 캔버스가 있습니다.

다음으로 JavaScript 에서 이미지와 캔버스를 정의해야 합니다.

const img = document.getElementById('eeveelutions');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

이제 캔버스에 있는 그대로 이미지를 렌더링할 수 있습니다.

Note: We have to wait for the image to load, else we will see a white image

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

하지만 이 점은 그다지 유용하지 않으므로 imageData 를 얻습니다.

const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

Note: For Codepen I have to add img.crossOrigin="anonymous"; for CORS issues.

그런 다음 다음과 같은 imageData 객체를 얻습니다.



앞에서 언급한 바와 같이 이들은 rgba 값이므로 4개의 레코드마다 다음을 포함하는 하나의 픽셀 값입니다.

빨강(0-255)

그린(0-255)

블루(0-255)

알파(0-255, 0 = 투명, 255 = 완전히 표시)

따라서 각 픽셀 값을 반전하려면 세 가지 색상 각각에 대해 다음 계산을 수행해야 합니다(알파는 255를 유지함).

빨간색 = 255 - 이전 값

녹색 = 255 - 이전 값

파란색 = 255 - 이전 값

코드에서는 다음과 같이 표시됩니다.

for (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);

이제 캔버스에 이미지를 배치하는 방법과 이미지의 픽셀 데이터를 수정하는 방법까지 배웠습니다! 🔥

Image credit Zerochan

브라우저 지원

imageData API와 캔버스는 매우 훌륭하게 지원됩니다!

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나