在JavaScript中确定图像大小而不使用`<；img>；`标签

使用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();

我将使用，因此如果它提供了这种效果的功能，那就适合我的需要。

您不需要ajax

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

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

---

您不需要将它添加到文档中来测量它的大小，但您必须等待它至少部分加载。如果您需要一次为多个图像执行此操作，并在大小可用时让其调用回调，则可以使用my 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;
    }
  }
};

var-ImageLoader={
最大支票数：1000，
名单：[]，
intervalHandle:null，
loadImage:函数（回调，url）{
var img=新图像（）；
img.src=url；
if（img.宽度和img.高度）{
回调（mg.width，img.height，url，0）；
}
否则{
var obj={image:img，url:url，callback:callback，checks:1}；
var i；
对于（i=0；i

这是给你的礼物。只需使用

图像

对象。

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

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

---

这是正确的方向，但还不起作用-如果在我检查高度/宽度时图像还没有加载怎么办？+1，关于图像的

onload

：在某些浏览器中，缓存图像时不会触发事件。（请参阅“与图像一起使用时加载事件的注意事项”）imageloader是ECMA标准还是其他标准，还是库？你能链接它吗？@Richard:不，整个代码都贴在上面了。您所要做的就是包含代码，然后调用“ImageLoader.loadImage”，提供回调函数和图像的url。它的好处是，在一个大图像上，在加载整个图像之前很长时间，您就会收到您的回调（大小）。谢谢。我是通过@Neal发现的。我知道这很有用。我相信他最终会读到这篇评论：]