이미지에 테두리 효과를 추가하려면 Cropper.js 라이브러리를 사용할 수 있습니다. Cropper.js는 웹 페이지에서 이미지를 자르고 편집하는 기능을 제공하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 이미지를 드래그하거나 확대/축소할 수 있으며, 특정 영역을 선택하여 자를 수도 있습니다.

Cropper.js 설치하기

<script src="https://cdn.jsdelivr.net/npm/cropperjs@1.5.9/dist/cropper.min.js"></script>

Cropper.js를 사용하려면 위의 스크립트를 HTML 파일에 추가해야 합니다. 이 스크립트는 CDN을 통해 Cropper.js 라이브러리를 가져옵니다.

Cropper.js 초기화하기

var image = document.getElementById('your-image-id');
var cropper = new Cropper(image);

Cropper.js를 사용하려면 new Cropper를 호출하여 새로운 Cropper 객체를 생성해야 합니다. your-image-id는 이미지 엘리먼트의 아이디를 넣어주어야 합니다.

테두리 효과 추가하기

Cropper.js는 선택한 이미지에 테두리 효과를 추가할 수 있는 다양한 옵션을 제공합니다. 예를 들어, cropper.setCropBoxData 함수를 사용하여 이미지의 특정 영역을 지정할 수 있습니다.

var cropBoxData = {
  left: 50,
  top: 50,
  width: 200,
  height: 200,
};
cropper.setCropBoxData(cropBoxData);

위의 코드는 이미지의 (50, 50) 좌표에서 시작해서 가로 200px, 세로 200px 크기의 영역을 자르도록 설정합니다.

자세한 내용과 예제

Cropper.js의 더 다양한 기능과 사용 방법에 대해서는 공식 문서를 참고하시기 바랍니다. 또한, 예제 코드와 실제 동작하는 데모를 확인하려면 디모 사이트를 방문해보세요.

이렇게 Cropper.js를 사용하여 이미지에 테두리 효과를 추가할 수 있습니다. 웹 페이지에서 이미지 편집 기능을 구현하고자 할 때 유용하게 사용할 수 있는 라이브러리입니다.