📷 JavaScript로 이미지 리사이징 후 PHP로 업로드하는 방법

웹에서 이미지를 업로드할 때, 용량이 큰 이미지를 서버에 바로 전송하면 속도도 느리고 서버 부담도 커지기 마련입니다.
그래서 프론트엔드에서 미리 이미지 사이즈를 줄이고(base64 또는 Blob 등으로) PHP 서버로 전송하면 효율적으로 처리할 수 있습니다.

이번 글에서는 JavaScript로 이미지 리사이징을 수행하고, PHP로 업로드하는 전체 과정을 예제와 함께 정리해보겠습니다.

---

✅ 전체 흐름 요약

1. 사용자가 파일 선택
2. JavaScript에서 이미지 리사이징 (canvas 사용)
3. 리사이징된 이미지를 Blob 또는 Base64로 변환
4. FormData에 담아 서버에 전송 (AJAX)
5. PHP에서 업로드 처리

---

🧪 1. HTML - 파일 입력 필드 만들기

<input type="file" id="upload" accept="image/*" />
<button onclick="resizeAndUpload()">업로드</button>

---

🧪 2. JavaScript - 이미지 리사이징 코드

function resizeAndUpload() {
  const fileInput = document.getElementById('upload');
  const file = fileInput.files[0];
  if (!file) return alert('파일을 선택해주세요.');

  const img = new Image();
  const reader = new FileReader();

  reader.onload = function (e) {
    img.src = e.target.result;
  };

  img.onload = function () {
    const canvas = document.createElement('canvas');
    const MAX_WIDTH = 800;
    const scale = MAX_WIDTH / img.width;

    canvas.width = MAX_WIDTH;
    canvas.height = img.height * scale;

    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    canvas.toBlob(function (blob) {
      const formData = new FormData();
      formData.append('image', blob, file.name);

      // 서버로 전송
      fetch('upload.php', {
        method: 'POST',
        body: formData
      })
        .then(res => res.text())
        .then(data => {
          alert('업로드 완료: ' + data);
        })
        .catch(err => {
          console.error(err);
          alert('업로드 실패');
        });
    }, file.type);
  };

  reader.readAsDataURL(file);
}

---

🧪 3. PHP - 업로드 처리 (upload.php)

<?php
if (isset($_FILES['image'])) {
    $uploadDir = 'uploads/';
    $filename = basename($_FILES['image']['name']);
    $uploadPath = $uploadDir . $filename;

    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadPath)) {
        echo "파일 업로드 성공: $uploadPath";
    } else {
        echo "업로드 실패";
    }
} else {
    echo "이미지가 전송되지 않았습니다.";
}

📁 uploads/ 폴더는 웹서버 쓰기 권한이 있어야 합니다.

---

✅ 결과

• 이미지 업로드 전 리사이징 처리로 서버 부하 감소
• 사용자 입장에서도 업로드 속도 개선
• Base64가 아닌 Blob 전송으로 성능도 OK

---

💡 팁: 이미지 리사이징 품질 조정

이미지 퀄리티를 조절하려면 canvas.toBlob() 대신 canvas.toDataURL('image/jpeg', 0.7) 처럼 압축률을 넣어도 됩니다.

---

마무리

프론트엔드에서 이미지 리사이징을 처리하면 UX 개선은 물론 서버 최적화에도 큰 도움이 됩니다.
특히 PHP로 백엔드를 운영 중이라면 위 방식으로 쉽게 구현할 수 있어요.