Fabric.js는 HTML5 Canvas를 다루기 위한 강력한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 이미지에 다양한 필터를 적용하는 방법을 알아보겠습니다.

필요한 사전 지식

• HTML5 Canvas: https://www.w3schools.com/html/html5_canvas.asp
• Fabric.js: http://fabricjs.com/

이미지 업로드하기

Fabric.js를 사용하여 이미지 필터를 적용하려면 먼저 이미지를 업로드해야 합니다. 이를 위해 HTML에서 파일 업로드 필드를 추가하고, 해당 파일을 Canvas에 로드하는 JavaScript 코드를 작성해야 합니다. 아래 코드를 살펴보세요.

<input type="file" id="image-upload">
<canvas id="canvas"></canvas>

var canvas = new fabric.Canvas('canvas');
var imageUpload = document.getElementById('image-upload');

imageUpload.addEventListener('change', function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();

  reader.onload = function(event) {
    var img = new Image();
    img.onload = function() {
      var fabricImg = new fabric.Image(img);
      canvas.add(fabricImg);
    }
    img.src = event.target.result;
  }

  reader.readAsDataURL(file);
});

위 코드는 파일 업로드 필드와 Canvas 요소를 HTML에 추가합니다. 그리고 파일을 선택하면 FileReader를 사용하여 이미지 파일을 읽고, Canvas에 로드합니다.

이미지 필터 적용하기

이미지를 업로드한 후에는 다양한 필터를 적용할 수 있습니다. Fabric.js는 다양한 필터를 제공하며, 이중에서 색조, 명도, 흐림 필터를 적용하는 방법을 알아보겠습니다.

색조 필터

색조 필터는 이미지에 색상을 적용하는 필터입니다. 아래 코드는 이미지에 색조 필터를 적용하는 방법을 보여줍니다.

var fabricImg = canvas.getObjects()[0];
fabricImg.filters.push(new fabric.Image.filters.HueRotation({
  rotation: 45 // 적용할 색상 회전 각도 설정
}));
fabricImg.applyFilters();
canvas.renderAll();

위 코드에서 fabric.Image.filters.HueRotation 클래스의 rotation 속성을 사용하여 적용할 색상 회전 각도를 설정합니다. applyFilters() 메서드를 호출하여 변경된 필터를 적용하고, renderAll() 메서드를 호출하여 캔버스를 다시 그립니다.

명도 필터

명도 필터는 이미지에 명도를 적용하는 필터입니다. 아래 코드는 이미지에 명도 필터를 적용하는 방법을 보여줍니다.

var fabricImg = canvas.getObjects()[0];
fabricImg.filters.push(new fabric.Image.filters.Brightness({
  brightness: -0.5 // 적용할 명도 값 설정 (-1에서 1 사이의 값)
}));
fabricImg.applyFilters();
canvas.renderAll();

위 코드에서 fabric.Image.filters.Brightness 클래스의 brightness 속성을 사용하여 적용할 명도 값을 설정합니다. 값을 조절하여 이미지의 명도를 변경할 수 있습니다.

흐림 필터

흐림 필터는 이미지에 흐림 효과를 적용하는 필터입니다. 아래 코드는 이미지에 흐림 필터를 적용하는 방법을 보여줍니다.

var fabricImg = canvas.getObjects()[0];
fabricImg.filters.push(new fabric.Image.filters.Blur({
  blur: 0.5 // 적용할 흐림 값 설정 (0 이상의 값)
}));
fabricImg.applyFilters();
canvas.renderAll();

위 코드에서 fabric.Image.filters.Blur 클래스의 blur 속성을 사용하여 적용할 흐림 값을 설정합니다. 값을 조절하여 이미지의 흐림 정도를 변경할 수 있습니다.

마무리

Fabric.js를 사용하면 이미지에 다양한 필터를 적용할 수 있습니다. 색조, 명도, 흐림 등 다른 필터도 Fabric.js에서 제공되므로, 필요에 따라 적절한 필터를 선택하여 사용할 수 있습니다. Fabric.js 공식 문서를 참조하여 추가적인 필터 및 기능에 대해 더 알아보세요.

참고 자료

• Fabric.js 공식 문서
• HTML5 Canvas