[javascript] Cropper.js를 사용하여 이미지에 투명한 배경 추가하기

29 Nov 2023

javascript

이미지 편집을 위해 Cropper.js라는 라이브러리를 사용할 수 있습니다. 이 라이브러리를 사용하면 클라이언트 측에서 이미지를 자를 수 있습니다. 이번 글에서는 Cropper.js를 사용하여 이미지에 투명한 배경을 추가하는 방법에 대해 알아보겠습니다.

Cropper.js란?

Cropper.js는 클라이언트 측에서 이미지를 자르고 편집할 수 있는 JavaScript 라이브러리입니다. 사용자가 이미지를 드래그하거나 조정할 수 있는 인터페이스를 제공하며, 결과 이미지의 크기, 형식 및 품질을 조절할 수 있습니다.

사용 방법

Cropper.js를 다운로드하고 HTML 파일에 추가합니다.

 <script src="cropper.min.js"></script>
 <link rel="stylesheet" href="cropper.min.css">

이미지를 로드하고 Cropper.js를 초기화합니다.

 <img id="image" src="image.jpg">
 <script>
     var image = document.getElementById('image');
     var cropper = new Cropper(image, {
         viewMode: 2, // 자세한 내용은 Cropper.js 문서 참조
         // 추가 옵션 설정
     });
 </script>

클라이언트가 이미지를 자르고 투명한 배경을 추가하도록 설정합니다.

 <button onclick="cropImage()">Crop</button>
 <script>
     function cropImage() {
         var result = cropper.getCroppedCanvas({
             // 배경 투명화 옵션 설정
             fillColor: 'transparent', // 배경색을 투명하게 설정함
             imageSmoothingEnabled: true, // 이미지를 부드럽게 처리함
             imageSmoothingQuality: 'high' // 이미지 처리 품질 설정
         });
          
         // 편집된 이미지 출력
         document.body.appendChild(result);
     }
 </script>

필요한 경우 이미지를 서버에 업로드합니다.

 var canvas = result; // Cropper.js에서 반환된 canvas 요소
 var dataURL = canvas.toDataURL('image/png'); // 이미지 데이터를 base64 형식으로 가져옴
 // 서버로 데이터 전송 등의 작업 수행

이제 Cropper.js를 사용하여 이미지에 투명한 배경을 추가하는 방법을 알게 되었습니다. 필요에 따라 추가 옵션을 설정하고, 결과 이미지를 서버에 업로드하는 등의 작업을 수행할 수 있습니다.

참고 자료

Cropper.js 공식 문서