JS - base64コードから画像の幅と高さを取得

Question

base64 img encoded私はhereを見つけることができます。どのように私はそれの高さと幅を得ることができますか？

Answer 1

var i = new Image(); 

i.onload = function(){ 
alert(i.width+", "+i.height); 
}; 

i.src = imageData; 

Answer 2

その画像で非表示の<img>を作成し、jquery .width（）とを使用します。ここでは、高さ（）

$("body").append("<img id='hiddenImage' src='"+imageData+"' />"); 
var width = $('#hiddenImage').width(); 
var height = $('#hiddenImage').height(); 
$('#hiddenImage').remove(); 
alert("width:"+width+" height:"+height); 

テスト： FIDDLE

画像が最初に隠された作成されません。作成されたら、幅と高さを取得してから削除します。この場合、大きな画像では表示が非常に短くなる可能性があります。この場合、別のコンテナにイメージをラップし、そのコンテナをイメージ自体ではなく非表示にする必要があります。

---

GPあたりとしてDOMに追加しません別のフィドルのANSER：。 HERE

Answer 3

私は.naturalWidthと.naturalHeightを使用すると、最良の結果を持っていたことが分かりました。

var img = new Image(); 

img.onload = function() { 
    var imgWidth = img.naturalWidth, 
     imgHeight = img.naturalHeight; 
}; 

これは現代のブラウザでのみサポートされています。同期の使用のためにhttp://www.jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie/

Answer 4

ちょうどこのような約束にそれをラップ：

function getImageDimensions(file) { 
    return new Promise (function (resolved, rejected) { 
    var i = new Image() 
    i.onload = function(){ 
     resolved({w: i.width, h: i.height}) 
    }; 
    i.src = file 
    }) 
} 

、あなたが使用することができ、同期のコーディングスタイルでデータを取得するために待っています：

var dimensions = await getImageDimensions(file)