상황: 웹 애플리케이션에서 사용자가 업로드한 이미지 파일을 처리하고 저장해야 합니다. 사용자가 업로드하는 이미지 파일의 크기가 너무 크면, 서버의 저장 공간이 빠르게 소모되고, 페이지 로딩 시간이 길어져 사용자 경험에 부정적인 영향을 미칩니다.
해결방안: 사용자가 업로드한 이미지 파일의 크기를 서버에서 자동으로 압축하고, 적절한 크기로 리사이징합니다.
1.
이미지 압축 및 리사이징 라이브러리 설치
Node.js 환경에서 Sharp 라이브러리를 사용하여 이미지 파일을 압축하고 리사이징할 수 있습니다. 먼저 Sharp 라이브러리를 설치합니다.
bashCopy code
npm install sharp
Plain Text
복사
2.
이미지 압축 및 리사이징 코드 작성
Sharp 라이브러리를 사용하여 이미지 파일을 압축하고, 지정한 크기로 리사이징하는 코드를 작성합니다.
javascriptCopy code
const sharp = require('sharp');
async function compressAndResizeImage(inputPath, outputPath, width, height) {
await sharp(inputPath)
.resize(width, height, { fit: 'inside' })
.jpeg({ quality: 80 })
.toFile(outputPath);
}
JavaScript
복사
3.
업로드된 이미지 처리
사용자가 이미지를 업로드하면 위에서 작성한 compressAndResizeImage 함수를 호출하여 이미지를 압축하고 리사이징합니다.
javascriptCopy code
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('image'), async (req, res) => {
const inputPath = req.file.path;
const outputPath = path.join('compressed', req.file.filename + '.jpg');
await compressAndResizeImage(inputPath, outputPath, 800, 800);
// 이미지 처리 후 추가 작업 수행
});
JavaScript
복사
이러한 방법으로 사용자가 업로드한 이미지 파일의 크기를 줄이고, 적절한 크기로 리사이징하여 서버의 저장 공간을 효율적으로 사용할 수 있고, 페이지 로딩 시간을 줄여 사용자 경험을 개선할 수 있습니다.