使用JavaScript在没有`<img>`标签的情况下确定图像大小

Question

如何使用JavaScript在不将图像插入文档的情况下确定未在文档中的图像大小？

我是否可以使用AJAX下载图像并通过编程方式检查其高度和宽度？

例如...

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var imageSize = MEGIC_GET_FILE_SIZE_FUNCTION(xmlhttp);
        alert("The image is "+imageSize.width+","+imageSize.height+".");
    }
}
xmlhttp.open("GET","lena.jpg",true);
xmlhttp.send();

我会使用Raphael，如果它提供了这样的功能，那就符合我的需求。

- Richard JP Le Guen

Answer 1

你不需要使用ajax。

var img = new Image();
img.onload = function() {
    alert("The image is " + this.width + "x" + this.height);
}
img.src = "lena.jpg";

- BalusC

---

+1，对于图片的onload事件有一些常见的注意事项：在某些浏览器中，当图片被缓存时，该事件不会触发。（请参见此处的“使用load事件时与图片有关的注意事项”） - Pekka

Answer 2

这里有一个针对你的示例，只需使用Image对象即可。

- pixelbobby

---

谢谢。我是通过@Neal发现它的。非常有用，我知道。我相信他最终会读到这条评论的：] - pixelbobby

Answer 3

var img = new Image();
img.src = url; 
var height = img.height;
var width = img.width;

- filipe

---

这是正确的方向，但目前不起作用 - 如果我在检查高度/宽度时图片尚未加载怎么办？ - Pekka

Answer 4

你不需要将其添加到文档中来测量其大小，但必须等待它至少部分加载。如果你需要同时对可能超过一张图片进行操作，并在尺寸可用时立即调用回调函数，可以使用我的imageloader模块：

var ImageLoader = {
maxChecks: 1000,
list: [],
intervalHandle : null,

loadImage : function (callback, url) {
  var img = new Image ();
  img.src = url;
  if (img.width && img.height) {
    callback (mg.width, img.height, url, 0);
    }
  else {
    var obj = {image: img, url: url, callback: callback, checks: 1};
    var i;
    for (i=0; i < this.list.length; i++)    {
      if (this.list[i] == null)
        break;
      }
    this.list[i] = obj;
    if (!this.intervalHandle)
      this.intervalHandle = setInterval(this.interval, 30);
    }
  },

// called by setInterval  
interval : function () {
  var count = 0;
  var list = ImageLoader.list, item;
  for (var i=0; i<list.length; i++) {
    item = list[i];
    if (item != null) {
      if (item.image.width && item.image.height) {
        item.callback (item.image.width, item.image.height, item.url, item.checks);
        ImageLoader.list[i] = null;
        }
      else if (item.checks > ImageLoader.maxChecks) {
        item.callback (0, 0, item.url, item.checks);
        ImageLoader.list[i] = null;
        }
      else {
        count++;
        item.checks++;
        }
      }
    }
  if (count == 0) {
    ImageLoader.list = [];
    clearInterval (ImageLoader.intervalHandle);
    delete ImageLoader.intervalHandle;
    }
  }
};

- rob

---

Imageloader是ECMA标准还是一个库？你能提供链接吗？ - Richard JP Le Guen

@Richard：不，整个代码已经粘贴在上面了。你只需要包含这段代码，然后调用"ImageLoader.loadImage"函数，提供一个回调函数和图片的URL即可。它的好处是，在加载大图时，你会在整个图片加载完成之前就收到回调（包含图片大小）的通知。 - rob

Answer 5

如果您知道图像的源，可以使用 JavaScript 图像对象：

function MEGIC_GET_FILE_SIZE_FUNCTION(src){
    var img = new Image();
    img.src = src;
    return {height: img.height, width: img.width};
} 

- TypingTurtle