atob（）を使用してcanvas toDataUrl（）のファイルサイズを返す

Question

URLからキャンバスに画像を読み込み、dataUrlを取得して画像のサイズを調べようとしています。

この結果、イメージは必要以上に大きく表示されます。

たとえば、60kbイメージを読み込むと、デコードされた変数は134kbに戻ります。

自分のPCにローカルに保存されている画像に同じコードを実行すると、代わりにファイル入力からファイルオブジェクトを取得し、戻り値が正しい（たとえば60kb）。

これは私が使用していたコードです：

  var canvas = document.getElementById('canvas'); 
      var ctx = canvas.getContext('2d'); 
      var img = '/anImage.jpg'; 
      var image = document.createElement('img'); 

      image.src = img; 

      ctx.drawImage(image, 500, 500); 

      ctx.drawImage(image, img.width, img.height); 

      var dataUrl = canvas.toDataURL('image/jpeg'); 

      var d = dataUrl.substr(dataUrl.indexOf('base64,') + 7); 
      var decoded = atob(d); 

      var size = decoded.length; 

私は再び出力にdataUrlを使用して画像を試してみましたが、それを保存している...まだ画像で134キロバイトではなく、元の大きさにもたらされます60Kbの。

私は、base64エンコーディングが画像を1.37倍大きくするが、ファイル入力からイメージオブジェクトを取得するときは値が正しいことを理解しています。

圧縮レベルが失われているかどうかわかりませんか？または、私は何とかファイルオブジェクトからこれを取得し、それを使用してtoDataUrl（）関数の2番目のパラメータを設定することができますか？

私はあなたがそれがホストされている画像に簡単なHEAD要求を行うことができますので、任意の情報をいただければ幸いです。このオンライン:)

Answer 1

はバイト単位で画像のサイズを取得するために特異的に関連するあらゆる情報を見つけることができません。例えば

：

var xhr = new XMLHttpRequest(); 
xhr.open('HEAD', '/anImage.jpg', true); 
xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4) { 
     if (xhr.status == 200) { 
      console.log('size: ' + xhr.getResponseHeader('Content-Length')); 
     } 
    } 
}; 
xhr.send(null);