[javascript] Cropper.js를 사용하여 이미지에 HDR 효과 추가하기

29 Nov 2023

javascript

Cropper.js는 높은 품질의 이미지 자르기 기능을 제공하는 JavaScript 라이브러리입니다. 이 튜토리얼에서는 Cropper.js를 사용하여 이미지에 HDR(High Dynamic Range) 효과를 추가하는 방법을 알아보겠습니다.

Cropper.js 설치하기

먼저, Cropper.js를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install cropperjs

HTML 마크업 준비하기

HTML 문서에 이미지를 추가하고 Cropper.js를 적용하기 위해 다음과 같은 마크업을 준비해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Cropper.js HDR 효과 추가</title>
  <!-- Cropper.js CSS 파일 -->
  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
</head>
<body>
  <h1>Cropper.js HDR 효과 추가</h1>

  <!-- 이미지를 포함할 div 요소 -->
  <div id="imageContainer">
    <img id="image" src="path/to/your/image.jpg">
  </div>

  <!-- Cropper.js 스크립트 파일 -->
  <script src="https://unpkg.com/cropperjs"></script>
</body>
</html>

Cropper.js 인스턴스 생성하기

다음 단계로, Cropper.js를 사용하여 이미지에 자르기 기능을 적용하는 인스턴스를 생성해야 합니다. 이 인스턴스를 통해 HDR 효과를 추가할 수 있습니다.

const image = document.getElementById('image');
const imageContainer = document.getElementById('imageContainer');
const cropper = new Cropper(image, {
  aspectRatio: 1,
  dragMode: 'move',
  viewMode: 1,
  zoomable: false,
  zoomOnWheel: false,
});

위 코드에서는 image 변수로 이미지 요소를, imageContainer 변수로 이미지를 포함하는 div 요소를 선택합니다. 그리고 Cropper.js 인스턴스를 생성할 때 다양한 옵션을 설정합니다.

HDR 효과 추가하기

이제 Cropper.js 인스턴스를 사용하여 HDR 효과를 추가할 수 있습니다. Cropper.js에는 getCroppedCanvas 메소드를 통해 현재 자른 이미지를 가져올 수 있습니다. 이를 활용하여 HDR 효과를 적용하는 예제 코드를 작성해보겠습니다.

const croppedCanvas = cropper.getCroppedCanvas();
const ctx = croppedCanvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, croppedCanvas.width, croppedCanvas.height);

for (let i = 0; i < imageData.data.length; i += 4) {
  // 픽셀별로 HDR 효과를 적용하는 로직을 작성합니다.
  // 예시로 간단히 모든 픽셀값에 2를 곱하여 밝기를 증가시킵니다.
  imageData.data[i] *= 2;
  imageData.data[i + 1] *= 2;
  imageData.data[i + 2] *= 2;
}

ctx.putImageData(imageData, 0, 0);

위 코드에서는 getCroppedCanvas 메소드를 사용하여 현재 자른 이미지를 가져옵니다. 그리고 캔버스 객체를 사용하여 getImageData 메소드로 픽셀 데이터를 가져와 HDR 효과를 적용합니다. 예시로는 간단히 모든 픽셀값에 2를 곱하여 밝기를 증가시키는 효과를 주었습니다. 마지막으로, putImageData 메소드로 적용된 픽셀 데이터를 캔버스에 그려줍니다.

이제 이미지에 HDR 효과가 추가되었습니다.

결론

이 문서에서는 Cropper.js를 사용하여 이미지에 HDR 효과를 추가하는 방법에 대해 알아보았습니다. Cropper.js를 통해 이미지를 자르는 기능을 적용하고, 이를 활용하여 픽셀별로 HDR 효과를 적용하는 방법을 소개했습니다.

더 많은 Cropper.js의 기능을 활용하여 다양하고 흥미로운 이미지 편집 기능을 구현할 수 있습니다. 자세한 내용은 Cropper.js 공식 문서를 참고하시기 바랍니다.