数据:图像/jpeg;base64如何获得它的宽度和高度的像素。

How do you get the width and height in pixels image which its src is in data:image/jpeg;base64 ?

你如何得到它的src在数据中的像素图像的宽度和高度:图像/jpeg;base64 ?

Didn't succeed using setting img.src to it and then calling width().

使用设置img没有成功。src，然后调用width()。

var img = jQuery("<img src="+oFREvent.target.result+">");
img.width() // = 0

2 个解决方案

#1

You have to wait for the image to be loaded (or complete, if cached). This will result in an asynchronous callback operation:

您必须等待图像被加载(或完成，如果缓存)。这将导致异步回调操作:

// pure JS:

var img = new Image();
img.src = myDataString;
if (img.complete) { // was cached
    alert('img-width: '+img.width);
}
else { // wait for decoding
    img.onload = function() {
       alert('img-width: '+img.width);
    }
}

Note: I once had the same problem with a project using jQuery. jQuery doesn't provide an access to the image directly enough just after you have created it. It seems, it's not possible to be done, but in pure JS. But you could try a timeout-loop and wait for the img-width to have a value (and catch any loading/decoding errors).

注意:我曾经在一个使用jQuery的项目中遇到过同样的问题。在您创建了它之后，jQuery并没有直接提供对映像的访问。这似乎是不可能的，但在纯JS中。但是您可以尝试一个timeoutloop，并等待img宽度有一个值(并捕获任何加载/解码错误)。

[Edit, see also comments] Why this works (why there is no race-condition):

[编辑，参见评论]为什么这样有效(为什么没有种族条件):

JS is single-threaded, meaning there's only one part of code executed at a given time. Any events will be queued until the current scope is exited and will only fire then. Thanks to late-binding, any listeners will be evaluated only then (after the current scope has been executed). So the handler will be present and listening as soon as the onload-Event is fired, regardless, if the listener was setup before or after setting the src-attribute. In contrast to this, the complete-flag is set as soon as the src-attribute is set.

JS是单线程的，这意味着在给定的时间内只执行了一部分代码。任何事件都将排队等待，直到当前的范围被退出，然后才会触发。由于后期绑定，任何侦听器都只有在那时才会被评估(在当前的范围被执行之后)。因此，当onload事件被触发时，处理程序将立即出现并侦听，如果侦听器是在设置src属性之前或之后设置的。与此形成对比的是，当src属性被设置时，将设置complete-flag。

#2

This will work :

这将工作:

var img = new Image();
img.onload = function() {
    alert(this.width);
}
img.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAA.......";

FIDDLE

小提琴

I made sure the base64 was valid by converting an image here, and the onload function should come before setting the source of the image.

我确保base64在这里转换图像是有效的，并且onload函数应该在设置图像的源之前出现。

#1