Canvas image resizingはファイルを大きくする

Question

私はイメージのアップロードを実装していますが、それ以前は限界に基づいていくつかのサイズ変更を行いたいとします（max-width、max-height、max-areaなど）。問題はイメージのサイズを変更するのではなく、ファイルサイズを変更します。

私はすでに品質をあきらめていますが、キャンバス、Pica、Hermiteから得られる結果に目に見える違いはありませんでしたので、私はオフスクリーンキャンバスに行くことにしました。

ファイルサイズは345x518（54.2kB）のPNG画像があり、領域512x512に収まるように、341x512 jpeg（同じアスペクト比）にサイズ変更した後、ファイルサイズが171.7kB。

リサイズ機能：

function _canvasImageGet(original, dims) { 
    var canvas = document.createElement("canvas"); 
    canvas.width = dims.w; 
    canvas.height = dims.h; 
    canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height); 

    return canvas; 
} 

は、どのような方法があり、どのように私はリサイズ後に小さいか、同じファイルサイズを得ることができますか？キャンバスを使用する必要はありませんが、サイズ変更がクライアント上にある場合、私は感謝します。すべてのanwersに感謝します。

Answer 1

私が使用しているキャンバスやその他のライブラリは圧縮を使用していないので、サイズ変更後は出力ファイルが以前よりも大きくなります。私は必要なものを正確に見つけました。 image-compressorはサイズ変更と圧縮を行い、すべてがクライアント側で行われます。別のライブラリJICがありますが、サイズ変更はできません。