Fabric.js는 HTML5 캔버스 상에서 그래픽을 그리고 조작할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 이미지를 캔버스에 추가하고 다양한 조작을 할 수 있어 편리합니다.

이번 포스트에서는 Fabric.js를 사용하여 이미지를 블러 처리하는 방법을 알아보겠습니다. 다음은 예제 코드입니다.

// Fabric.js 캔버스 생성
var canvas = new fabric.Canvas('canvas');

// 이미지 로드
fabric.Image.fromURL('image.jpg', function(img) {
  // 이미지 크기 조절
  img.scaleToWidth(canvas.width);
  img.scaleToHeight(canvas.height);

  // 이미지를 캔버스에 추가
  canvas.add(img);

  // 이미지 블러 처리
  img.filters.push(new fabric.Image.filters.Blur({
    blur: 10
  }));
  img.applyFilters();
});

위 코드에서는 fabric.Image.fromURL 메소드를 사용하여 이미지를 로드하고, scaleToWidth와 scaleToHeight 메소드를 사용하여 이미지를 캔버스 크기에 맞게 조절합니다. 그 다음으로 filters 배열에 fabric.Image.filters.Blur 객체를 추가하여 이미지를 블러 처리하고, applyFilters 메소드를 호출하여 변경 사항을 적용합니다.

이제 위 코드를 실행하면 이미지가 캔버스에 로드되고 블러 처리된 결과를 볼 수 있습니다.

Fabric.js를 사용하면 다양한 필터와 조작 기능을 사용하여 이미지를 처리할 수 있습니다. 블러 처리 외에도 이미지의 색상을 조절하거나, 투명도를 변경하는 등 다양한 작업을 할 수 있습니다.

더 자세한 정보는 Fabric.js 공식 문서를 참고하시기 바랍니다.