data:image / jpeg; base64如何获取其宽度和高度(以像素为单位)

时间:2013-07-14 16:02:52

标签: javascript jquery

如何获得像素格式的宽度和高度,其src在数据中:image / jpeg; base64?

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

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

2 个答案:

答案 0 :(得分:5)

这将有效:

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

FIDDLE

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

答案 1 :(得分: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属性,就会设置完整标志。