最適なブラウザのサイドイメージのサイズ変更ですか？

Question

インターネット上のコードに基づいて、ブラウザ側で画像のサイズを変更しています。私はcanvasを使用しているので、単純なサイズ変更から新しいpngを取得します。

これは私がしようとしているものです：

const MAX_SIZES = { 
    thumbnail: { 
    MAX_WIDTH: 200, 
    MAX_HEIGHT: 160 
    }, 
    small: { 
    MAX_WIDTH: 400, 
    MAX_HEIGHT: 300, 
    }, 
    medium: { 
    MAX_WIDTH: 800, 
    MAX_HEIGHT: 600 
    } 
}; 

export const resize = (file, size) => { 
return new Promise(function (resolve, reject) { 
let _this = this; 

const { MAX_WIDTH, MAX_HEIGHT } = MAX_SIZES[size]; 
let img = document.createElement("img"); 
let reader = new FileReader(); 
reader.onload = function(e) { 
    img.src = e.target.result; 

    let canvas = document.createElement("canvas"); 
    let ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    let width = img.width; 
    let height = img.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 = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0, width, height); 

    resolve(dataURItoBlob(canvas.toDataURL("image/png"))); 
} 
reader.readAsDataURL(file); 

}）;

}

だから私は、これらの問題に直面している：

• は、プロセスのサイズ変更非常に遅くです。
• 中間イメージ（800x600）は、巨大なファイルサイズを取得します。私は増加し、明るい/色（これが唯一の感謝である）

で画像を取得する一般的に

私は私のサイズ変更の選択肢を改善するための任意の安い戦略を取ることができれば、私は疑問に思います。私は大きなファイルを避けるためにあらゆるPNG画像の最適化にも興味があります。

Answer 1

このような問題については、私は通常、リアルタイム画像処理のために既存のソリューション/サービスを使用することに取り組んでいます。 https://www.imgix.com/