[JS] base64 이미지 용량 줄이기 (File API)

 

base64로 변환한 이미지 용량 차이

코드

// const file = (<input type="file">).files[0]
// file type을 가진 input DOM에 files로 파일 데이터를 가져올 수 있습니다.

const fr = new FileReader();
    
fr.onload = (base64) => {
  const image = new Image();

  image.src = base64.target.result;

  image.onload = (e) => { 
    const $canvas = document.createElement(`canvas`);
    const ctx = $canvas.getContext(`2d`);
   
    $canvas.width = e.target.width;
    $canvas.height = e.target.height;
    
    ctx.drawImage(e.target, 0, 0);

    // 용량이 줄어든 base64 이미지
    console.log($canvas.toDataURL(`image/jpeg`, 0.5));
  }
}

fr.readAsDataURL(file);

해당 방법은 input file에서 지정한 파일 데이터를 가져와 File api를 사용하여 base64로 바꿔 canvas에 그려주고 toDataURL에 있는 품질 변경 기능을 이용하여 base64로 바꾸는 이미지 용량을 줄여줄 수 있습니다.

참고사항

canvas.toDataURL(type, encoderOptions);

encoderOptions 값은 품질을 변경시킵니다.

 

• type에 "image/png"를 넣을 시 용량이 커질 수 있습니다.
• 품질 수치를 더 줄일 시 용량이 더 줄어듭니다.