如何找到base64图像的宽度和高度答案

【问题标题】：How to find the base64 image width and height如何找到base64图像的宽度和高度
【发布时间】：2012-12-25 20:06:40
【问题描述】：

如何求base64图片的宽高

<img id="thumb0" width="200" height="200" 
src="data:image/png;base64, ................">

图像属性的宽度和高度是恒定的，因为我需要将它们显示为缩略图，但是原始图像属性不同。

我需要获取原始图像的高度和宽度。

假设我的原始图像高度和宽度是 750 X 500

我试过这样但是得到了属性的宽度和高度

$("#thumb0").width();

值为 200。

请帮助如何获取图像的原始宽度和高度。

【问题讨论】：

图像（至少在 Firefox 上）具有 naturalWidth/height 属性，因此您可以使用 img.naturalWidth 来获取原始宽度
在 firefox 的 firebug 中尝试过，它说未定义
它在 Firefox 和 Chrome 中都适用于我。请注意，图像必须完全加载才能使用 naturalWidth / naturalHeight 属性。
@SaiPrasad +1 这是个好主意，但我找不到有关此属性兼容性的信息，我认为该属性仅在 HTML5 中标准化。如果你能找到它，这应该是一个答案。
你可以在这里找到另一个问题的答案：stackoverflow.com/questions/17774928/…

标签： javascript jquery html

【解决方案1】：

您可以构建另一个图像元素并获取其大小：

var img = new Image();
img.src = $('#thumb0').attr('src');
var originalWidth = img.width;

【讨论】：

但我认为巨大的图像需要时间，我们需要在创建后销毁？
不，它会非常快，尤其是在没有发出请求的情况下。而且您无需进行任何破坏：一旦您离开声明 img 的函数，它就会被清除。
@dystroy 它在android中不起作用~~~，有什么办法让它起作用吗？

【解决方案2】：

dystroy 的回答中提到的Image() constructor for HTMLImageElements 是正确的方法，但有一个警告：构造函数实际上是异步的！因此，您可能会在某些浏览器中遇到意外行为；从我有限的实验来看，dystroy 的代码在 Chrome 中 100% 的时间都可以工作，但有时只能在 Firefox 和 Safari 中工作。别人不知道。

正确的做法似乎是with an onload handler，如：

var img = new Image();
img.src = some_base64_image_source;
console.log(img.width);       // This might print out 0!
img.onload = function() {
    console.log(img.width);   // This will print out the width.
}

【讨论】：