[javascript] Cropper.js를 사용하여 이미지에 새로운 배경 추가하기

29 Nov 2023

javascript

이미지 편집을 위해 Cropper.js라는 JavaScript 라이브러리를 사용할 수 있습니다. 이 라이브러리는 이미지 자르기, 회전, 크기 조정 등 다양한 작업을 수행할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 Cropper.js를 사용하여 이미지에 새로운 배경을 추가하는 방법을 알아보겠습니다.

1. Cropper.js 설치하기

Cropper.js를 사용하기 위해서는 먼저 라이브러리를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install cropperjs

2. HTML 파일에 Cropper.js 추가하기

다음으로 HTML 파일에 Cropper.js를 추가해야 합니다. 먼저 이미지를 포함할 <img> 요소를 추가합니다.

<img id="image" src="image.jpg">

그리고 Cropper.js 스크립트와 스타일을 추가합니다.

<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
<script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>

3. Cropper.js 초기화하기

JavaScript에서 Cropper.js를 초기화하여 이미지를 편집할 수 있습니다. 아래의 코드를 사용하여 Cropper.js를 초기화합니다.

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 16/9,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  }
});

위의 코드에서 aspectRatio는 편집 영역의 가로 세로 비율을 설정하는 옵션입니다. crop 이벤트 리스너에서는 이미지의 편집 정보를 사용할 수 있습니다. 위의 예제에서는 콘솔에 편집 정보를 출력하도록 설정되어 있습니다.

4. 새로운 배경 추가하기

이제 Cropper.js에서 얻은 편집 정보를 사용하여 이미지에 새로운 배경을 추가할 수 있습니다. 예를 들어 다음과 같이 이미지와 배경을 overlay하기 위한 CSS 클래스를 정의할 수 있습니다.

.overlay-image {
  position: relative;
}

.overlay-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

이제 crop 이벤트 핸들러에서 이미지에 새로운 배경을 추가합니다.

cropper.options.ready = function() {
  var imageData = cropper.getImageData();
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  canvas.width = imageData.naturalWidth;
  canvas.height = imageData.naturalHeight;

  context.drawImage(imageData.image, imageData.left, imageData.top, imageData.width, imageData.height);
  context.fillStyle = "rgba(0, 0, 0, 0.5)";
  context.fillRect(0, 0, canvas.width, canvas.height);

  image.src = canvas.toDataURL();
};

위의 코드에서는 Cropper.js의 getImageData 메서드를 사용하여 이미지를 가져오고, <canvas> 요소를 생성하여 이미지와 배경을 overlay합니다. 마지막으로 image.src를 변경하여 새로운 이미지를 표시합니다.

결론

Cropper.js를 사용하면 이미지에 새로운 배경을 추가할 수 있습니다. 이번 포스트에서는 Cropper.js 초기화 방법과 새로운 배경 추가하는 방법을 알아보았습니다. Cropper.js에는 더 많은 기능과 옵션이 있으니 공식 문서를 참조하시기 바랍니다.

참고 자료

Cropper.js 공식 문서: https://github.com/fengyuanchen/cropperjs