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

【问题标题】：data:image/jpeg;base64 how to get its width and height in pixelsdata:image/jpeg;base64 如何获取其宽度和高度（以像素为单位）
【发布时间】：2013-07-12 12:58:05
【问题描述】：

如何获取其 src 在 data:image/jpeg;base64 中的图像的宽度和高度（以像素为单位）？

将 img.src 设置为它然后调用 width() 没有成功。

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

【问题讨论】：

您是否等待图像加载？
@Musa，别这么认为，看看我的编辑

标签： javascript jquery

【解决方案1】：

这将起作用：

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

FIDDLE

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

【讨论】：

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

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

JS 是单线程的，这意味着在给定时间只执行一部分代码。任何事件都将排队，直到退出当前范围，并且只会在那时触发。由于后期绑定，任何侦听器将仅在那时（在执行当前范围之后）被评估。因此，一旦触发 onload-Event，处理程序就会出现并进行侦听，无论侦听器是在设置 src 属性之前还是之后设置的。与此相反，一旦设置了 src 属性，就会设置完成标志。

【讨论】：

缓存不是问题，因为 base64 图像不会被缓存！
嗯，你确定有未来吗？现在和永远更好地处理这种边缘情况......
是的，我确定，图像没有被缓存，但是如果带有 base64 字符串的文件是静态的，比如 .js 文件或 .html 文件，并且标题设置正确，那带有 base64 字符串的文件将被缓存，但与浏览器缓存图像的方式不同，因此完整的处理程序没有意义。
@adaneo：仅仅因为内部图像数据是由 base64 文本字符串而不是使用 TCP/IP 连接构造的，并不一定意味着绕过缓存子系统。我并不是说它在这种情况下绝对有用，但你的论点中没有足够的证据来保证它没有被使用。
无论如何——如果不检查完整标志，代码会变得更加简单。但我不能保证两年后浏览器的内部结构。（所以，您可能会醒来，网站刚刚停止处理某些不稳定情况下的一些图像，而您却没有任何线索。最好从一开始就做好防御，让您未来的睡眠。;-)）