이미지 편집을 위해 Cropper.js라는 JavaScript 라이브러리를 사용할 수 있습니다. Cropper.js를 사용하면 사용자가 지정한 영역으로 이미지를 자를 수 있는 기능을 구현할 수 있습니다. 이번에는 Cropper.js를 이용하여 이미지의 명도를 조정하는 방법에 대해 알아보겠습니다.

Cropper.js 설치하기

먼저 Cropper.js를 프로젝트에 추가해야합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다.

npm install cropperjs

HTML 구조 설정하기

이미지 편집을 위해 HTML 구조를 설정해야합니다. 다음은 간단한 HTML 구조 예시입니다.

<div>
  <img id="image" src="image.jpg">
</div>
<button id="brightness-button">명도 조정</button>

위의 예시는 이미지를 감싸는 <div>와 이미지를 표시하는 <img> 요소, 그리고 명도 조정을 위한 버튼 <button>을 포함하고 있습니다.

JavaScript로 Cropper.js 초기화하기

JavaScript 파일에서 Cropper.js를 초기화하고 이미지에 명도 조정 기능을 구현해야합니다. 다음은 초기화하는 JavaScript 코드 예시입니다.

import Cropper from 'cropperjs';

const imageElement = document.getElementById('image');
const brightnessButton = document.getElementById('brightness-button');

const cropper = new Cropper(imageElement, {
  viewMode: 2,
  aspectRatio: NaN,
  autoCropArea: 1,
});

brightnessButton.addEventListener('click', () => {
  const imageData = cropper.getImageData();
  const pixelData = imageData.data;

  for (let i = 0; i < pixelData.length; i += 4) {
    const red = pixelData[i];
    const green = pixelData[i + 1];
    const blue = pixelData[i + 2];

    const brightness = Math.floor((red + green + blue) / 3);
    pixelData[i] = brightness;
    pixelData[i + 1] = brightness;
    pixelData[i + 2] = brightness;
  }

  cropper.setImageData(imageData);
});

위의 코드에서는 Cropper 클래스를 가져와서 imageElement에 적용합니다. 이 때, viewMode를 2로 설정하여 이미지가 확대되어 표시되도록 하고, aspectRatio를 NaN으로 설정하여 사용자가 원하는 비율로 이미지를 자를 수 있도록 합니다. 또한, autoCropArea를 1로 설정하여 이미지 영역을 자동으로 잡도록 합니다.

명도 조정 버튼을 클릭할 경우, cropper.getImageData()를 사용하여 이미지 데이터를 가져와서 픽셀 데이터를 조정합니다. 평균값을 계산하여 명도로 사용하고, R, G, B 채널에 같은 명도 값을 적용합니다. 마지막으로, cropper.setImageData()를 사용하여 조정한 이미지 데이터를 적용합니다.

이제 위의 코드를 사용하여 이미지의 명도를 조정할 수 있습니다.

결론

Cropper.js를 사용하여 이미지의 명도를 조정하는 방법에 대해 알아보았습니다. Cropper.js는 이미지 편집에 유용한 기능을 제공하므로 많은 프로젝트에서 활용될 수 있습니다. 이를 통해 사용자들은 웹페이지에서 간편하게 이미지를 편집할 수 있게 될 것입니다.