data：image / jpeg; base64如何获取其宽度和高度（以像素为单位）

Question

你如何获得像素的图像宽度和高度，其src在数据中：image / jpeg; base64？

没有成功使用设置img.src然后调用width（）。

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

Answer 1

这将有效：

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

小提琴

我通过在此处转换图像确保base64有效，并且onload函数应该在设置图像源之前进行。

Answer 2

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

// 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-width有一个值（并捕获任何加载/解码错误）。

[编辑，另见评论]为什么这样做（为什么没有竞争条件）：

JS是单线程的，这意味着在给定时间只执行一部分代码。 任何事件都将排队，直到退出当前范围，然后才会触发。 由于后期绑定，任何侦听器都将被评估（在当前作用域执行之后）。 因此，无论是否在设置src-attribute之前或之后设置了侦听器，处理程序将在onload-Event被触发时立即出现并进行侦听。 与此相反，只要设置了src-attribute，就会设置complete-flag。