[javascript] Fabric.js로 이미지 로드 및 크롭하기

30 Nov 2023

javascript

이번 포스트에서는 Fabric.js를 사용하여 이미지를 로드하고, 사용자가 원하는 부분을 크롭하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치하기

먼저, Fabric.js를 사용하기 위해 해당 패키지를 설치해야 합니다. 다음 명령어를 사용하여 Fabric.js를 설치합니다.

npm install fabric

이미지 로드하기

이미지를 로드하기 위해서는 fabric.Image.fromURL() 메소드를 사용합니다. 이 메소드를 사용하여 원하는 이미지를 로드할 수 있습니다. 아래 예제에서는 example.jpg라는 이미지를 로드합니다.

var canvas = new fabric.Canvas('canvas');

fabric.Image.fromURL('example.jpg', function(img) {
    canvas.add(img);
});

로드한 이미지는 img 변수에 저장되며, canvas.add() 메소드를 통해 캔버스에 추가합니다.

이미지 크롭하기

이미지를 크롭하기 위해서는 fabric.Image 객체의 setCoords() 메소드를 사용하여 이미지 영역을 선택하고, cropper 클래스로 선택된 영역을 감싸는 사각형을 그립니다. 그 후 canvas.toDataURL() 메소드를 사용하여 선택된 부분을 이미지로 저장할 수 있습니다.

var cropper;

canvas.on('mouse:down', function(event) {
    var pointer = canvas.getPointer(event.e);
    cropper = new fabric.Rect({
        left: pointer.x,
        top: pointer.y,
        width: 0,
        height: 0,
        fill: 'rgba(0,0,0,0.3)',
        stroke: 'black',
        strokeWidth: 2,
    });
    canvas.add(cropper);
});

canvas.on('mouse:move', function(event) {
    if (!cropper) return;
    var pointer = canvas.getPointer(event.e);
    cropper.set({
        width: pointer.x - cropper.left,
        height: pointer.y - cropper.top
    });
    canvas.renderAll();
});

canvas.on('mouse:up', function(event) {
    var imageData = canvas.toDataURL({
        left: cropper.left,
        top: cropper.top,
        width: cropper.width,
        height: cropper.height
    });
    var croppedImage = new Image();
    croppedImage.src = imageData;
    document.body.appendChild(croppedImage);
});

위 코드에서는 마우스 이벤트를 사용하여 사용자가 이미지 영역을 선택할 수 있도록 합니다. mouse:down 이벤트가 발생하면 해당 위치를 기준으로 cropper 객체를 생성하고 추가합니다. mouse:move 이벤트가 발생하면 마우스 이동에 따라 cropper 객체의 크기를 조절합니다. mouse:up 이벤트가 발생하면 canvas.toDataURL() 메소드를 사용하여 선택된 부분을 이미지로 저장하고, 결과 이미지를 화면에 표시합니다.

이제 Fabric.js를 사용하여 이미지를 로드하고 부분을 크롭하는 방법을 알게 되었습니다. 자세한 내용은 Fabric.js 공식 문서를 참고하시기 바랍니다.