キャンバスがイメージサイズを拡大するのはなぜですか？

Question

私は前面にユーザーがアップロードする画像を圧縮します。

ソースイメージは651Kb（Mac OS）で、サイズフォーム（1920 * 1080）を（1000 * 562）に変更すると、画像のサイズは1.2Mb（ブラウザ）、1.4Mb（Mac OS）、1.29 Mb（Windows 7）。どんなものであれ、元のイメージのサイズを大きくしていました。

なぜですか？

ソース画像：http://7xoaqt.com1.z0.glb.clouddn.com/maikailun.jpg

コード：https://codepen.io/maicss/pen/ayLgdo/

<input type="file" multiple accept="image/*"> 

<canvas></canvas> 


const $ = document.querySelector.bind(document) 
const input = $('input') 
const canvas = $('canvas') 
const ctx = canvas.getContext('2d') 

const readableSize = (size) => { 
    return size/1024 > 1024 ? (~~(10 * size/1024/1024))/10 + 'MB' : ~~(size/1024) + 'KB' 
} 

input.onchange = function (e) { 
    const files = e.target.files; 
    [].forEach.call(files, file => { 
    const img = new Image() 
    img.src = URL.createObjectURL(file) 
    img.onload = function() { 
     let radio = 1 
     if (Math.min(this.height, this.width) > 1000) { 
      radio = Math.max(this.height/1000, this.width/1000) 
     } 
     canvas.height = this.height/radio 
     canvas.width = this.width/radio 

     ctx.fillRect(0, 0, canvas.width, canvas.height); 
     ctx.drawImage(img, 0, 0, canvas.width, canvas.height) 
     canvas.toBlob(function (b) { 
      console.log(readableSize(b.size)) 
     }) 
     URL.revokeObjectURL(this.src) 
    } 
    }) 
} 

Answer 1

型のソース画像より従って、典型的には大きいロスレスフォーマットであり、デフォルトでPNGファイルを生成する画像種別方法toBlob() with no mime-type argument JPEG。

変更この行：

canvas.toBlob(function (b) { 
    console.log(readableSize(b.size)) 
}) 

それはJPEGだけでなく、品質設定を使用して作った画像のMIMEの引数を取る：品質の引数（[0.0、1.0]と

canvas.toBlob(function(b) { 
    console.log(readableSize(b.size)) 
}, "image/jpeg", 0.7); 

実験）あなたのニーズに合わせて。