[javascript] Fabric.js로 바탕화면 이미지 삭제하기

30 Nov 2023

javascript

바탕화면에 이미지를 표시하고, 이를 삭제하는 간단한 예제를 Fabric.js를 사용하여 작성해보겠습니다.

Fabric.js란?

Fabric.js는 이미지, 도형, 텍스트 등 다양한 그래픽 요소를 웹 페이지에서 손쉽게 조작하고 관리할 수 있는 JavaScript 라이브러리입니다. 이를 사용하면 웹 페이지에 그래픽 요소를 동적으로 추가, 제거, 변경할 수 있으며, 사용자와 상호작용하는 애플리케이션을 만들 수 있습니다.

예제 코드

먼저, Fabric.js를 HTML 파일에 추가합니다:

<!DOCTYPE html>
<html>
<head>
    <title>Fabric.js Image Delete Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
        // Fabric.js 초기화
        var canvas = new fabric.Canvas('canvas');

        // 이미지 추가
        fabric.Image.fromURL('image.jpg', function(img) {
            img.set({
                left: 50,
                top: 50
            });
            canvas.add(img);
        });

        // 이미지 삭제
        function deleteImage() {
            var selectedObject = canvas.getActiveObject();
            if (selectedObject && selectedObject.type === 'image') {
                canvas.remove(selectedObject);
                canvas.renderAll();
            }
        }
    </script>
</body>
</html>

위의 코드는 Fabric.js를 사용하여 이미지를 추가하고, 선택한 이미지를 삭제하는 예제입니다. 먼저 fabric.Canvas을 사용하여 캔버스를 초기화합니다.

그리고 fabric.Image.fromURL을 사용하여 이미지 파일을 로드하고, 좌표를 설정한 후 캔버스에 추가합니다.

마지막으로 deleteImage 함수를 통해 선택된 이미지를 삭제하는 기능을 구현합니다. canvas.getActiveObject를 사용하여 선택된 객체를 가져온 후, 이 객체가 이미지인지 확인하고 canvas.remove를 사용하여 해당 이미지를 삭제합니다.

이제 웹 브라우저에서 HTML 파일을 열고, 이미지를 클릭하여 선택한 후 “Delete” 버튼을 클릭하면 이미지가 삭제됨을 확인할 수 있습니다.

결론

Fabric.js는 웹 페이지에서 그래픽 요소를 다루는 데 유용한 라이브러리입니다. 이를 사용하여 바탕화면 이미지를 동적으로 추가하고 삭제하는 기능을 구현할 수 있습니다.