저장되는 미디어 용량 줄이기, convert image/gif to webp (javascript)

webp 란

gif, png, jpeg 을 전부 지원하는 이미지파일 포멧이다.
기존보다 용량을 30% 가량 줄여준다고 한다.

파일을 인자로 받아 canvas 에 쓰고 데이터 타입과 사이즈를 바꾸는 함수를 작성했다.

출력: blob데이타

async function processFile(file) {

        return new Promise(function(resolve,reject){
            // Load the data into an image url
            // then convert raw Image into webp format && resizing 
          	let rawImage = new Image();
            this.webpurl =null;
            
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext("2d");

            rawImage.onload = function () {
                if (rawImage.src){
                    var width = rawImage.width;
                    var height = rawImage.height;

                    if (width > height) {
                        if (width > MAX_WIDTH) {
                            height *= MAX_WIDTH / width;
                            width = MAX_WIDTH;
                        }
                    } else {
                        if (height > MAX_HEIGHT) {
                            width *= MAX_HEIGHT / height;
                            height = MAX_HEIGHT;
                        }
                    }
                    canvas.width = width;
                    canvas.height = height;
                    
                    ctx.drawImage(rawImage, 0, 0, width, height);
                    canvas.toBlob(function(blob){
                        console.log("this webpurl",this.webpurl);
                        resolve(blob);
                    },"image/webp");
                }
            };

            rawImage.src = URL.createObjectURL(file);
            rawImage.crossOrigin = 'Anonymous';
            
        })
    }

적용 전& 후 비교

효과는 대단했다..

• 전
  
• 후
  

628KB --> 31 KB 로 줄었다.

헐..