[javascript] Fabric.js로 이미지 필터 효과 적용하기(그레이스케일, 채도 조절)

30 Nov 2023

javascript

이번 포스트에서는 Fabric.js를 사용하여 이미지에 그레이스케일과 채도 조절과 같은 필터 효과를 적용하는 방법에 대해 소개하겠습니다.

필요한 라이브러리 설치 및 초기 설정

먼저, Fabric.js를 사용하기 위해 필요한 라이브러리를 설치해야 합니다. 이를 위해 다음 명령어를 사용합니다:

npm install fabric

다음으로, 필터 효과를 적용할 HTML 파일을 작성하고, 해당 파일에서 필요한 라이브러리를 불러옵니다:

<!DOCTYPE html>
<html>
<head>
    <title>Fabric.js Image Filter Example</title>
    <script src="fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

그레이스케일 필터 적용하기

이제 필터 효과를 적용할 이미지를 Fabric.js의 fabric.Image.fromURL() 메서드를 사용하여 가져옵니다. 그리고 해당 이미지에 그레이스케일 필터를 적용합니다:

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

// 이미지 로드
fabric.Image.fromURL('my-image.png', function(img) {
    // 그레이스케일 필터 적용
    img.filters.push(new fabric.Image.filters.Grayscale());

    // 필터 적용 업데이트
    img.applyFilters();

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

위 코드에서 my-image.png는 원하는 이미지의 파일 경로로 변경해야 합니다.

채도 조절 필터 적용하기

다음으로, 이미지에 채도 조절 필터를 적용하는 방법을 살펴보겠습니다. 이 경우에도 Fabric.js의 fabric.Image.fromURL() 메서드를 사용하여 이미지를 가져온 뒤, 채도 조절 필터를 적용합니다:

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

// 이미지 로드
fabric.Image.fromURL('my-image.png', function(img) {
    // 채도 조절 필터 적용
    img.filters.push(new fabric.Image.filters.Saturation({
        saturation: -1 // -1부터 1 사이 값 (음수: 감소, 양수: 증가)
    }));

    // 필터 적용 업데이트
    img.applyFilters();

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

위 코드에서 my-image.png는 원하는 이미지의 파일 경로로 변경해야 합니다. 또한, Saturation 필터의 saturation 속성 값으로 원하는 채도 설정을 할 수 있습니다.

마무리

이제 Fabric.js를 사용하여 이미지에 그레이스케일과 채도 조절과 같은 필터 효과를 적용하는 방법에 대해 알아보았습니다. 필요한 경우, 다양한 종류의 필터를 적용하여 더욱 다채로운 이미지 효과를 만들 수 있습니다.

본 포스트에서 소개한 코드 및 예제는 Fabric.js의 공식 문서를 참고하여 작성되었습니다. 더 자세한 정보는 아래의 링크를 참고해주세요:

Fabric.js 공식 문서