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

29 Nov 2023

javascript

이미지에 가상 배경을 추가하기 위해 Cropper.js 라이브러리를 사용할 수 있습니다. Cropper.js는 이미지를 자르고 크롭하는 기능을 제공하는 강력한 도구입니다. 이 튜토리얼에서는 Cropper.js를 사용하여 이미지에 가상 배경을 추가하는 방법을 알아보겠습니다.

Cropper.js 및 관련 CSS 파일 추가하기

먼저, Cropper.js와 관련 CSS 파일을 HTML 페이지에 추가해야합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cropper.js Example</title>
    <link rel="stylesheet" href="cropper.min.css">
    <script src="cropper.min.js"></script>
</head>
<body>
<!-- 이미지와 가상 배경을 표시할 컨테이너 -->
<div id="image-container">
    <img id="image" src="image.jpg" alt="Image">
    <div id="virtual-background"></div>
</div>
</body>
</html>

JavaScript 코드 작성하기

다음으로, JavaScript 코드를 작성하여 Cropper.js를 초기화하고 가상 배경을 추가합니다.

window.addEventListener('DOMContentLoaded', function () {
    var image = document.getElementById('image');
    var container = document.getElementById('image-container');
    var virtualBackground = document.getElementById('virtual-background');

    var cropper = new Cropper(image , {
        crop: function(e) {
            var imageData = cropper.getImageData();
            var virtualBackgroundWidth = imageData.naturalWidth / imageData.width * container.offsetWidth;
            var virtualBackgroundHeight = imageData.naturalHeight / imageData.height * container.offsetHeight;
            virtualBackground.style.width = virtualBackgroundWidth + 'px';
            virtualBackground.style.height = virtualBackgroundHeight + 'px';
            virtualBackground.style.backgroundImage = 'url(path/to/virtual-background.png)';
            virtualBackground.style.backgroundSize = virtualBackgroundWidth + 'px ' + virtualBackgroundHeight + 'px';
            virtualBackground.style.backgroundPosition = -e.detail.x * virtualBackgroundWidth / imageData.width + 'px ' + -e.detail.y * virtualBackgroundHeight / imageData.height + 'px';
        }
    });
});

위의 코드에서 image, container, virtualBackground 변수는 HTML 요소를 가져옵니다. cropper 객체를 만들고 crop 이벤트를 구독합니다. crop 이벤트가 발생할 때마다 cropper.getImageData()를 사용하여 이미지의 너비 및 높이를 가져옵니다. 그런 다음, virtualBackground 요소의 크기 및 배경 이미지를 설정하고 가상 배경을 이동시킵니다.

결론

이제 Cropper.js를 사용하여 이미지에 가상 배경을 추가하는 방법을 알아보았습니다. 위의 코드를 사용하여 원하는 이미지에 가상 배경을 적용해 보세요. Cropper.js 라이브러리에 대한 자세한 내용은 공식 문서를 참조하십시오.