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

图像不最初创建隐藏的。它被创建，然后你得到宽度和高度，然后删除它。在这种情况下，这可能会在大图像中导致非常短的可见性，因此您必须将图像包装在另一个容器中，并且隐藏该容器而不是图像本身。

---

另一个小提琴不添加到DOM按的GP雁： 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)