이미지 리사이징은 동적 웹 애플리케이션에서 필요한 기능 중 하나입니다. 자바스크립트를 사용하여 이미지를 리사이징하는 방법을 알아보겠습니다. 이를 위해 미들웨어를 활용할 것입니다.

미들웨어란?

미들웨어는 서버와 클라이언트 사이에서 요청과 응답을 처리하기 위해 사용되는 소프트웨어입니다. 자바스크립트에서 미들웨어는 요청과 응답의 중간에서 동작하여 사전 및 사후 처리를 수행합니다.

이미지 리사이징 구현

1. express.js를 사용하여 서버를 구성합니다.

const express = require("express");
const app = express();

// 미들웨어 설정
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 이미지 리사이징 라우터 설정
app.get("/resizeImage", (req, res) => {
  // 이미지 리사이징 로직을 구현합니다.
});

// 서버 시작
app.listen(3000, () => {
  console.log("서버가 시작되었습니다");
});

1. 이미지 리사이징 로직을 구현합니다.

const sharp = require("sharp");

app.get("/resizeImage", (req, res) => {
  const { imageUrl, width, height } = req.query;

  sharp(imageUrl)
    .resize(width, height)
    .toBuffer()
    .then((data) => {
      res.set("Content-Type", "image/jpeg");
      res.send(data);
    })
    .catch((error) => {
      console.error(error);
      res.status(500).send("이미지 리사이징에 실패했습니다");
    });
});

1. 위의 코드에서 사용된 sharp 모듈은 이미지 처리를 위한 강력한 라이브러리입니다. 필요한 경우 npm install sharp 명령어를 사용하여 설치할 수 있습니다.

테스트

위의 코드를 작성한 후 서버를 시작하고 브라우저에서 http://localhost:3000/resizeImage?imageUrl=image.jpg&width=200&height=200 와 같이 요청을 보내보세요. imageUrl에는 리사이징할 이미지의 URL을 넣고, width와 height에는 원하는 리사이즈 크기를 넣으면 됩니다. 서버는 리사이징된 이미지를 응답으로 보내줄 것입니다.

결론

자바스크립트를 사용하여 이미지 리사이징을 구현하는 방법을 알아보았습니다. 미들웨어를 활용하여 이미지 처리 기능을 효율적으로 구현할 수 있으며, sharp와 같은 라이브러리를 사용하여 편리하게 이미지를 조작할 수 있습니다.

이 방법을 응용하여 다양한 이미지 처리 기능을 구현할 수 있으니, 웹 애플리케이션 개발 과정에서 유용하게 활용해보세요.

#imagerecognition #serverdevelopment