[HTML /JS] 이미지를 드래그 앤 드롭으로 업로드, 이미지 이름과 크기 변경하기

 

HTML에 사진을 드래그해서 업로드하는 방법을 알아보겠다.

아이콘 작업을 일괄적으로 하거나, 어딘가에 사진을 반복적으로 업로드하기 위해 크기들을 일괄 지정할 필요가 생길 것이다.

나는 개인적으로 카카오톡 테마를 만들면서 여러 장의 이미지를 일괄적으로 지정된 크기로 변경할 필요가 있었다.

 

먼저 이미지를 업로드하기 위해서는 캔버스(Canvas)가 필요하다. 이미지를 업로드하는 캔버스를 만들어 준 뒤, 드래그 앤 드롭하여 이미지를 끌어놓을 수 있도록 먼저 html로 캔버스의 모양을 만들어준다. <input type=file>로 설정해 파일을 업로드 할 수 있게 만들어준다. 이러면 버튼을 클릭하여 이미지를 업로드 할 수 있게 된다.

<form id="image-form">
    <div id="drop-area">
      <input type="file" id="image-input">
      <p>이미지1.</p>
    </div>
    <button type="submit">Upload</button>
  </form>

 

모양을 잡았다면, 간단히 드래그 앤 드롭 영역 표시가 잘 되도록 CSS를 작성해준다.

  <style>
  #drop-area{
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
  }
  #drop-area.highlight {
    background-color: #eee;
  }


  #drop-area2{
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
  }
  #drop-area2.highlight {
    background-color: #eee;
  }
 
  </style>

이제, 드래그 앤 드롭을 통하여 이미지를 변환해주는 자바스크립트 코드를 추가해준다. 여기부터가 가장 핵심이라고 볼 수 있는 코드이다.

먼저 드래그 앤 드롭을 위한 영역을 지정해준다.

  const form = document.getElementById('image-form');
  const input = document.getElementById('image-input');
  const dropArea = document.getElementById('drop-area');

그 다음으로는, 드래그 앤 드롭을 활성화시키기 위해 'dragcenter' , 'dragover' , 'dragleave' , 'drop' 등의 속성을 추가해준다. 

  // IMAGE========================================================IMAGE
  // Prevent default drag behaviors
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, e => {
      e.preventDefault();
      e.stopPropagation();
    }, false);
  });
  
  // Highlight drop area when image is dragged over it
  ['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => {
      dropArea.classList.add('highlight');
    }, false);
  });
  
  ['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => {
      dropArea.classList.remove('highlight');
    }, false);
  });
  
  // Handle dropped image file
  dropArea.addEventListener('drop', e => {
    const files = e.dataTransfer.files;
    if (files.length !== 1 || !files[0].type.startsWith('image/')) {
      alert('Error: Please drop one image file.');
      return;
    }
    input.files = files;
  });

맨 마지막에는, 드래그 앤 드롭 된 파일을 원하는 사이즈, 원하는 이름으로 변환해 다운로드할 수 있게 하는 과정의 코드이다.

여기서 const = new_name = '원하는이름.png'; 를 통하여 원하는 이름으로 변환하여 다운로드할 수 있다. 아마 input함수를 통해 새로운 이름으로 다운로드 할 수도 있을 것이다. 

 

아래의 코드는 어떠한 사진이든, 300x300으로 변환되도록 설정된 상태이다.

  // Handle form submission
  form.addEventListener('submit', e => {


    e.preventDefault();
    const file = input.files[0];
  
    // Check if file is an image
    if (!file.type.startsWith('image/')) {
      alert('Error: File is not an image.');
      return;
    }
  
    // Resize image to 300x300
    const img = new Image();
    const reader = new FileReader();
    reader.onload = () => {
      img.src = reader.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 300;
        canvas.height = 300;
        ctx.drawImage(img, 0, 0, 300, 300);
        const resized_img = canvas.toDataURL('image/png');
  
        // Save resized image as PNG
        const new_name = 'imagenamekakaotalk_1.png';
        const a = document.createElement('a');
        a.href = resized_img;
        a.download = new_name;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      };
    };
    reader.readAsDataURL(file);


    
  });

 

 

https://github.com/SamuelGalaxys/kakaoImageConv

GitHub - SamuelGalaxys/kakaoImageConv: KakaoImageConv

이 깃허브에 모든 소스코드가 올라와 있습니다. 만약 도움이 되었다면 스타를 눌러주거나 깃허브 계정을 팔로우해주세요! :)