소개

이미지 필터링은 웹 애플리케이션에서 사용되는 일반적인 기능 중 하나입니다. 사용자는 이미지에 다양한 필터를 적용하여 이미지를 수정할 수 있습니다. 이 글에서는 Axios를 사용하여 클라이언트 측에서 이미지 필터링을 구현하는 방법에 대해 알아보겠습니다.

Axios란?

Axios는 브라우저와 Node.js에서 HTTP 요청을 처리하는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 간편한 방법으로 서버에 HTTP 요청을 보낼 수 있습니다.

클라이언트 측에서 이미지 필터링하기

1. HTML 파일에 이미지 업로드 폼과 필터 옵션을 추가합니다. ```html

2. JavaScript 파일에서 사용자가 이미지를 업로드하고 필터를 적용할 수 있도록 코드를 작성합니다.
```javascript
const imageUpload = document.getElementById('imageUpload');
const filterOption = document.getElementById('filterOption');

document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();

  const file = imageUpload.files[0];
  const selectedFilter = filterOption.value;

  const formData = new FormData();
  formData.append('image', file);
  formData.append('filter', selectedFilter);

  try {
    const response = await axios.post('/api/filter', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });

    // 필터링된 이미지를 화면에 표시하는 코드 작성
  } catch (error) {
    console.error(error);
  }
});

1. 서버 측에서 필터링된 이미지를 처리하는 API 엔드포인트를 구현합니다. ```javascript const express = require(‘express’); const multer = require(‘multer’); const { createCanvas, Image } = require(‘canvas’); const router = express.Router();

//이미지 필터링 함수 구현 function applyFilter(image, filter) { const canvas = createCanvas(image.width, image.height); const ctx = canvas.getContext(‘2d’);

ctx.drawImage(image, 0, 0, image.width, image.height);

if (filter === ‘grayscale’) { const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data;

for (let i = 0; i < data.length; i += 4) {
  const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
  data[i] = avg;
  data[i + 1] = avg;
  data[i + 2] = avg;
}

ctx.putImageData(imageData, 0, 0);   } else if (filter === 'sepia') {
// Sepia 필터 구현   } else if (filter === 'blur') {
// Blur 필터 구현   }

return canvas.toDataURL(); }

//이미지 필터링 API 엔드포인트 구현 router.post(‘/api/filter’, multer().single(‘image’), (req, res) => { const image = new Image(); image.src = req.file.buffer;

const filteredImage = applyFilter(image, req.body.filter);

res.send(filteredImage); });

module.exports = router; ```

결론

이제 Axios를 사용하여 클라이언트 측에서 이미지 필터링을 구현하는 방법을 알게 되었습니다. 이를 통해 웹 애플리케이션에서 이미지를 수정하고 표시할 수 있습니다. 필요에 따라 필터링 기능을 확장하고 다양한 이미지 편집 기능을 추가할 수도 있습니다.