data： Image/jpeg； bas64如何以像素为单位获得其宽度和高度

Question

你如何得到它的src在数据中的像素图像的宽度和高度：图像/jpeg； bas64？

未成功使用设置img。src调用它，然后调用width（）。

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

Answer 1

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

// 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);
    }
}

注意：我曾经在使用jQuery的项目中遇到过同样的问题。jQuery在创建图像后不能直接提供对图像的访问。看来，这是不可能做到的，但在纯粹的JS。但是您可以尝试一个超时循环，等待img宽度有一个值（并捕获任何加载/解码错误）。

[编辑，另请参见注释]为什么这样做（为什么没有竞争条件）：

JS是单线程的，这意味着在给定时间只执行一部分代码。任何事件都将排队，直到当前作用域退出，并且只有在退出时才会触发。由于后期绑定，所有侦听器只有在那时（在执行当前作用域之后）才会被评估。因此，不管侦听器是在设置src属性之前还是之后设置的，只要启动onload事件，处理程序就会出现并侦听。与此相反，一旦设置了src属性，就会设置complete标志。

Answer 2

这将有助于：

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

不停摆弄

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