이미지 파일 사이즈 리사이징

이미지를 리사이징하기 위해 base64로 이미지를 변환한다.

여기서 이미지 변환 quality 에 대하여 브라우저 의존적이며, 크롬이나 파이어폭스에서의 default 값은 0.92이다.
(0~1 사이로 정의해야하며 낮으면 그만큼 low quality image로 변환된다.

canvas.toDataURL(`image/jpeg`, /* default quality */)

 

이미지 용량 줄이기

let base64 = e.target.result;
/** 용량 줄이기 */
const image = new Image();
image.src = base64;

image.onload = (event) => {

  const $canvas = document.createElement(`canvas`);
  const ctx = $canvas.getContext(`2d`);

  $canvas.width = event.target.width;
  $canvas.height = event.target.height;

  ctx.drawImage(event.target, 0, 0);

  // 용량이 줄어든 base64 이미지

  let original = $canvas.toDataURL(`image/jpeg`);
  let size = this.getImageSize( original );
  let quality = size > 500000 ? 0.98: 1.0;

  vueObj.idImageBase64 = $canvas.toDataURL(`image/jpeg`, quality );
  console.log( "quality " + quality + " file size ::", this.getImageSize( vueObj.idImageBase64 ) );
}

image.remove();