JavaScript로 이미지를 체크박스화하세요 ✅

최근에 우리는 Canvas를 사용하여 다음과 같은 요소를 배웠습니다.

Getting started with the HTML canvas

Vanilla JavaScript save canvas as an image

Vanilla JavaScript colouring our canvas elements 🌈

Vanilla JavaScript images in canvas

Vanilla JavaScript canvas images to black and white

오늘은 캔버스를 이용하여 간접적으로 뭔가를 해보려고 하는데, 오래전부터 마음에 맴돌던 일이었어요!

우리는 체크박스 아트를 만들고 있습니다! ✅

이것이 공식적인 예술 형식인지는 모르겠지만 지금은 그렇습니다.

결과는 다음과 같습니다.

HTML 구조

HTML의 경우 샘플 이미지, 캔버스를 사용하고 div를 출력해야 합니다.

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1600097347472/FaJTB7UrN.jpeg" id="eeveelutions" />
<canvas id="canvas" width="100" height="100"></canvas>
<div id="output"></div>

이 경우 이미지는 200x200이고 캔버스는 100x100이고 출력은 400x400가 됩니다.

CSS 스타일링

스타일을 지정하기 위해 체크박스를 사용하고 있기 때문에 서로 스냅되도록 체크박스를 플로팅합니다.
그리고 <br />를 사용하여 새 행을 만듭니다.
br은 실제로 플로트에 대한 명확한 역할을 합니다.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}
canvas {
  opacity: 0;
}
input {
  width: 4px;
  height: 4px;
  margin: 0;
  padding: 0;
  float: left;
}
br {
  clear: both;
}
#output {
  width: 400px;
  line-height: 0px;
}

캔버스는 불투명도를 0으로 설정하여 숨깁니다.

자바스크립트 체크박스화 이미지

먼저 모든 변수를 정의하겠습니다.

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

이제 조치를 취하기 전에 이미지 로드를 들어야 합니다.

img.onload = function () {
  loaded++;
    // Do stuff
};

이미지가 두 번 실행되기 때문에 실제 로드와 한 번 캔버스에 그려지기 때문에 이미지가 로드되는 시간을 계산합니다.

다음으로 이미지를 캔버스에 추가할 수 있습니다.

ctx.drawImage(img, 0, 0, 100, 100);

매개변수는 다음과 같습니다. (소스, x, y, 너비, 높이)

자, 이제 캔버스가 있고 그 위에 이미지가 그려집니다. 그런 다음 두 번째 로드인지 확인하고 해당 로드 내에서 몇 가지 마법을 시작해야 합니다.

if (loaded > 1) {
    // The second draw on the canvas
}

그런 다음 캔버스에서 imageData를 가져올 수 있습니다. (x, y, 너비, 높이)

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

이제 나머지 기능을 보여드리겠습니다.

let j = 0;
for (i = 0; i < imgData.data.length; i += 4) {
  let count = imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];

  let _break = document.createElement("br");
  let checkbox = document.createElement("INPUT");
  checkbox.setAttribute("type", "checkbox");
  checkbox.checked = true;
  if (count > 383) checkbox.checked = false;

  output.appendChild(checkbox);
  j++;
  if (j === 100) {
    j = 0;
    output.appendChild(_break);
  }
}

j 매개변수를 사용하여 행 수를 계산하므로 100줄마다 1행이므로 <br /> 요소를 추가해야 합니다.

imageData API가 각 픽셀에 대한 값rgba을 제공하므로 4개의 값이 1픽셀을 정의하기 때문에 기본 루프는 4개의 요소마다 반복됩니다.

그런 다음 처음 3개(rgb)를 추가하여 rgba 픽셀의 색상을 계산합니다.

그리고 이 픽셀이 383(255+255+255의 절반)보다 큰지 확인하여 이 픽셀이 검정 또는 흰색 픽셀인지 확인합니다.

그런 다음 체크박스를 만들고 픽셀이 검은색이면 체크박스로 만듭니다.

마지막으로 출력 div에 확인란을 추가하고 필요한 경우 행 나누기를 추가합니다.

자, 이 Codepen에서 놀아보세요.

브라우저 지원

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

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

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