Vanilla JavaScript 캔버스 이미지를 흑백으로

어제 우리는 use images on our canvas 방법과 색상을 반전시키는 방법을 보았습니다.

하지만 세 가지 색상 옵션으로만 변환하려면 어떻게 해야 할까요?

우리가 사용할 색상 옵션은 다음과 같습니다.

블랙

화이트

그레이(1종만!)

이것은 이미지를 추상화하고 그레이스케일 이미지를 수동으로 생성하는 방법을 알려줍니다.

오늘의 최종 결과는 다음과 같습니다.

자바스크립트

어제 글에서도 보셨듯이 getImageData 함수를 사용하고 있습니다.

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

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  // Code comes here
};

이것은 rgba 값을 반환하므로 어제 우리는 4번째 자식마다 반복해야 합니다.

for (i = 0; i < imgData.data.length; i += 4) {

}

자, 이제 우리가 얻는 4픽셀 값은 rgba 입니다.
우리가 사용하지 않을 알파이지만 rgb에 대해 하나의 결합된 값을 얻고 싶습니다.

빨강 초록과 파랑에 대한 세 가지 값을 더해 봅시다.

let count = imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];

이렇게 하면 0(검은색)과 765(흰색) 사이의 픽셀 번호가 제공됩니다.

우리의 경우에는 하나의 그레이 스케일 레이어도 추가하므로 다음 세 가지 계산을 얻습니다.

0-255 = 블랙

256-510=그레이

511-765=화이트

즉, 다음과 같은 코드를 가질 수 있습니다.

let colour = 0;
if (count > 510) colour = 255;
else if (count > 255) colour = 127.5;

여기에서 기본 색상을 검정(0), 흰색(255) 및 회색(127.5)으로 정의했습니다.

그런 다음 픽셀의 처음 세 값에 색상을 추가하고 알파 레이어에 255를 추가할 수 있습니다.

imgData.data[i] = colour;
imgData.data[i + 1] = colour;
imgData.data[i + 2] = colour;
imgData.data[i + 3] = 255;

그런 다음 데이터를 캔버스에 다시 넣어야 합니다.

ctx.putImageData(imgData, 0, 0);

이제 이미지를 세 가지 색상으로 변환했습니다!

이 Codepen에서 놀아보십시오.

완전한 흑백으로 이동

다음 계산을 사용하여 순수한 흑백으로 만들 수도 있습니다.

블랙=0~382

화이트=383~765

그러면 다음 루프가 생성됩니다.

for (i = 0; i < imgData.data.length; i += 4) {
    let count = imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];
    let colour = 0;
    if (count > 383) colour = 255;

    imgData.data[i] = colour;
    imgData.data[i + 1] = colour;
    imgData.data[i + 2] = colour;
    imgData.data[i + 3] = 255;
}

다음 Codepen에서 이 예제를 찾으십시오.

브라우저 지원

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

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

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