[javascript] Cropper.js를 사용하여 이미지에 그림자 추가하기

29 Nov 2023

javascript

이미지 편집에 자주 사용되는 기능 중 하나는 이미지에 그림자를 추가하는 것입니다. 이를 구현하는 방법 중 하나는 Cropper.js 라이브러리를 사용하는 것입니다. Cropper.js는 이미지의 크롭, 회전, 확대/축소 등 다양한 기능을 제공하는 강력한 라이브러리입니다.

이 튜토리얼에서는 Cropper.js를 사용하여 이미지에 그림자를 추가하는 방법을 알아보겠습니다.

Cropper.js 설치하기

먼저 Cropper.js를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 Cropper.js를 설치합니다.

npm install cropperjs --save

HTML 파일 설정하기

다음으로 HTML 파일을 설정해야 합니다. 다음과 같이 이미지를 포함하는 HTML 파일을 만들어 줍니다.

<!DOCTYPE html>
<html>
<head>
    <title>Cropper.js를 사용하여 이미지에 그림자 추가하기</title>
    <link href="cropper.css" rel="stylesheet">
</head>
<body>
    <div>
        <img id="image" src="image.jpg">
    </div>
    <script src="cropper.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript 파일 작성하기

마지막으로 JavaScript 파일을 작성해야 합니다. 다음과 같이 Cropper.js를 사용하여 이미지에 그림자를 추가할 수 있는 코드를 작성해 줍니다.

window.addEventListener('DOMContentLoaded', function() {
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
        dragMode: 'move',
        autoCropArea: 0.75,
        shadow: true // 그림자 활성화
    });
});

위 코드에서 shadow 옵션을 true로 설정하면 이미지에 그림자가 추가됩니다.

실행해보기

위의 모든 단계를 완료한 후 웹 브라우저에서 HTML 파일을 열어서 확인해보세요. 이미지에 그림자가 추가되어 있을 것입니다.

이제 Cropper.js를 사용하여 이미지에 그림자를 추가하는 방법을 알게 되었습니다. 추가로 다른 기능들도 사용해 볼 수 있으니 공식 문서를 참고해 보시기 바랍니다.

참고 자료

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