6

您如何获得其 src 在 data:image/jpeg;base64 中的像素图像的宽度和高度？

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

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

2 回答 2

5

这将起作用：

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

小提琴

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

于 2013-07-14T16:10:33.880 回答
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 是单线程的，这意味着在给定时间只执行一部分代码。任何事件都将排队，直到退出当前范围，并且只会在那时触发。多亏了后期绑定，任何侦听器才会被评估（在当前范围执行之后）。因此，一旦触发 onload-Event，处理程序就会出现并进行侦听，无论侦听器是在设置 src 属性之前还是之后设置的。与此相反，一旦设置了 src 属性，就会设置完成标志。

于 2013-07-14T16:14:59.960 回答