javascript 기반 이미지 처리 라이브러리

이미지 처리 작업을 JavaScript로 하려고 할때 선택할 수 있는 라이브러리를 정리해 보았습니다.

1. Fabric.js

특징

캔버스 기반의 이미지 처리와 드로잉 작업에 강점이 있는 라이브러리.

주요 기능:

• 이미지 필터 적용
• 이미지 회전, 크기 조정, 이동
• 텍스트 추가 및 편집
• 사용 예: 사진 편집기, 캔버스 기반의 인터랙티브 툴 제작

📦 설치

npm install fabric

import { fabric } from "fabric";

const canvas = new fabric.Canvas("canvas");
fabric.Image.fromURL("example.jpg", (img) => {
  img.scale(0.5);
  canvas.add(img);
});

2. sharp

특징

서버사이드에서 빠른 이미지 변환 및 최적화 처리가 가능해요. Node.js에서 주로 사용된다.

주요 기능

• 이미지 리사이징, 포맷 변환 (JPEG, PNG, WebP 등)
• 자르기, 회전, 필터 효과
• 사용 예: 이미지 업로드 및 썸네일 생성 서버

📦 설치

npm install sharp

import sharp from "sharp";

sharp("input.jpg")
  .resize(300, 300)
  .toFile("output.jpg", (err, info) => {
    console.log(info);
  });

3. Jimp (JavaScript Image Manipulation Program)

특징

클라이언트와 서버 모두에서 사용 가능하며, 단순한 API로 이미지 작업을 지원해요.

주요 기능

• 이미지 리사이징, 필터 적용
• 텍스트 오버레이 추가
• 이미지 포맷 변환
• 사용 예: 간단한 이미지 처리, 로고 추가 등

📦 설치

npm install jimp

import Jimp from "jimp";

Jimp.read("example.jpg").then((img) => {
  img.resize(256, 256).write("output.jpg");
});

4. Konva.js

특징

Fabric.js와 비슷하지만 SVG 및 애니메이션 처리에 강점이 있어요.

주요 기능

• 캔버스 기반 이미지 작업
• 고급 이미지 및 드로잉 인터랙션
• 사용 예: 그래픽 디자인 툴, 애니메이션 편집기

📦 설치

npm install konva

import Konva from "konva";

const stage = new Konva.Stage({
  container: "container",
  width: 500,
  height: 500,
});

const layer = new Konva.Layer();
const image = new Konva.Image({ image: someHTMLImageElement });
layer.add(image);
stage.add(layer);

5. glfx.js

특징

WebGL을 활용한 고성능 이미지 필터 효과를 지원해요.

주요 기능

• 고급 이미지 필터 (블러, 빛 효과 등)
• 실시간 렌더링
• 사용 예: 고급 필터가 필요한 웹 애플리케이션

📦 설치

npm install glfx

import fx from "glfx";

const canvas = fx.canvas();
const texture = canvas.texture(image);
canvas.draw(texture).sepia().update();

6. Pica

특징

브라우저에서 빠르고 부드러운 이미지 리사이징을 지원해요.

주요 기능

• 고품질 리사이징
• 브라우저 기반 비동기 처리
• 사용 예: 웹 애플리케이션의 이미지 업로드 전 처리

📦 설치

npm install pica

import Pica from "pica";

const pica = Pica();
pica.resize(inputCanvas, outputCanvas).then(() => {
  console.log("Done!");
});

7. image-js

특징

이미지 분석과 조작에 초점이 맞춰져 있어요.

주요 기능

• 이미지 픽셀 처리
• 히스토그램 분석, 컬러 채널 조작
• 사용 예: 이미지 데이터 분석

📦 설치

npm install image-js

import { Image } from "image-js";

const img = await Image.load("example.jpg");
const grey = img.grey();
grey.save("output.jpg");

라이브러리 선택

어떤 라이브러리를 선택하느냐는 프로젝트 목적에 따라 달라질 수 있습니다. 클라이언트 기반인지 서버 기반인지, 그리고 이미지 작업의 복잡성에 따라 결정할 수 있습니다. 필요한 기능에 대해 더 자세히 얘기하고 싶으시면 알려주세요~🏍