[javascript] Cropper.js를 사용하여 이미지를 반전시키는 방법

29 Nov 2023

javascript

먼저, Cropper.js와 필요한 HTML 요소를 포함한 웹 페이지를 만듭니다.

<!DOCTYPE html>
<html>
<head>
  <title>Cropper.js를 사용하여 이미지 반전하기</title>
  <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
</head>
<body>
  <h1>이미지 반전</h1>
  <input type="file" id="imageInput">
  <button onclick="invertImage()">이미지 반전</button>
  <br>
  <img id="image" src="" alt="이미지">
  <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
  <script src="app.js"></script>
</body>
</html>

다음으로, JavaScript 코드를 작성하여 이미지를 반전시킵니다. app.js 파일을 만들고 아래의 코드를 추가합니다.

// 이미지 선택 시 호출되는 함수
function handleImageSelect(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  
  reader.onload = function (event) {
    const img = document.getElementById('image');
    img.src = event.target.result;
    
    // 이미지가 로드된 후에 Cropper.js 인스턴스를 생성합니다.
    const cropper = new Cropper(img, {
      viewMode: 1,
      dragMode: 'move',
      aspectRatio: NaN,
      guides: false,
      responsive: true,
      autoCropArea: 0.8,
      movable: false,
      rotatable: true,
      scalable: true,
      zoomable: false,
      zoomOnTouch: false,
      zoomOnWheel: false,
      cropBoxResizable: false,
    });
  };

  reader.readAsDataURL(file);
}

// 이미지 반전 함수
function invertImage() {
  const image = document.getElementById('image');
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  canvas.width = image.width;
  canvas.height = image.height;
  
  // 이미지를 캔버스에 그립니다.
  context.drawImage(image, 0, 0);

  // 캔버스의 이미지 데이터를 가져옵니다.
  const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 이미지 데이터를 반전시킵니다.
  for (let i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i]; // 빨간 색상 반전
    data[i + 1] = 255 - data[i + 1]; // 초록 색상 반전
    data[i + 2] = 255 - data[i + 2]; // 파란 색상 반전
  }

  // 변경된 이미지 데이터를 캔버스에 다시 그립니다.
  context.putImageData(imageData, 0, 0);

  // 반전된 이미지를 화면에 보여줍니다.
  image.src = canvas.toDataURL();
}

// 이미지 선택 이벤트를 등록합니다.
const imageInput = document.getElementById('imageInput');
imageInput.addEventListener('change', handleImageSelect);

위의 코드를 사용하여 이미지를 반전시킬 수 있습니다. 웹 페이지를 열고 이미지 파일을 선택한 후 ‘이미지 반전’ 버튼을 클릭하면 이미지가 반전되어 화면에 표시됩니다.