Question

我想知道是否可以在不将图像放入页面的情况下获得图像的宽度和高度，即无需创建显示图像的图像标记。

尝试使用此方法创建一个精灵类。

function Sprite(src,frames) {
    // Sprite class 
    this.img = new Image();
    this.img.src = src;

    this.frames = frames;
    this.cframe = 1;

    this.setDim = function() {
      this.fullWidth = this.img.width;
      this.fullHeight = this.img.height;
    }

    this.img.onload = this.setDim();
    console.log(this.fullWidth);
    return this;
  }

然而this.fullWidth返回undefined 以及忽略onload的下面返回0

 function Sprite(src,frames) {
    // Sprite class 
    this.img = new Image();
    this.img.src = src;

    this.frames = frames;
    this.cframe = 1;

    this.fullWidth = this.img.width;
    this.fullHeight;

    this.setDim = function() {
      this.fullWidth = this.img.naturalWidth;
      this.fullHeight = this.img.height;
      console.log(this.fullWidth)
    }
    console.log(this.fullWidth)
    //this.img.onload = this.setDim();

    return this;
  }

我真的不想为此使用Jquery。我也试过了this.img.natrualWidth（正如你在上面的例子中看到的那样）它也返回0

任何建议都会很棒，感谢

更新此内容以匹配@ vihan1086答案

      function Sprite(src,frames) {
    // Sprite class 
    this.img = new Image();
    this.img.src = src;

    this.frames = frames;
    this.cframe = 1;

    var self = this;
    self.loaded = function () {};
    this.setDim = function() {

      self.fullWidth = this.width;
      self.fullHeight = this.height;

      self.frameWidth = this.width / self.frames;
      self.frameHeight = this.height;

      self.loaded.apply(self, []);
    }

    this.loaded = function() {
      return this;
    }

    this.img.onload = this.setDim;

  }

然后使用

sprite = new Sprite(sprite,5);
    sprite.loaded = function() {
      console.log(sprite.fullWidth);

    }

Answer 1

问题

var img = new Image();
img.src = '/my/src/to/file';

//this refers to the current function at this point

img.onload = function () {
   //this is 'img' at this point not the function
}

解决方案

this不在范围内，因此您需要添加：

var self = this;//Self and this are referring to the same thing, the function

img.onload = function () {
    //this refers to image but self still refers to the function's this
    self.width = this.width;
    self.height = this.height;
}

console.log(this.width);//logs width
console.log(this.height);//logs height

这会留下可以使用两种方法解决的异步问题

<强> A

this.img.onload = this.setDim; //Noticed the dropped ()

<强>乙

self.loaded = function () {};

this.setDim = function () {
    //...
    self.loaded.apply(self, []);
}

然后

var sprite = new Sprite(...);
sprite.loaded = function () {
    console.log(this.fullHeight);
}

说明

img.onload()更改了代码的范围，导致this引用img。现在奇怪的部分。我们创建了一个引用self的变量this，这样我们就可以使用this来引用不同范围内的self。

其他

img.onload是＆＃34; async＆＃34;这意味着它不会跟随其余的代码。这意味着console.log()已经投放，但img.onload还没有。在这种类型的代码（我在更新中写了几个解决方案）时工作时要小心。您应该等到img.onload完成后再检查值。我以前曾经做过类似的事情，我会看看能否找到解决所有问题的方法。如果可以的话，我会更新这个答案。

更新：我首先不会运行setDim功能，让用户运行setDim() - ＆gt; setDim。如果您希望首先加载尺寸，请将加载函数添加到检索尺寸时运行的Sprite()。

Answer 2

在javascript中，语句是异步执行的。要了解更多相关信息，请阅读这篇优秀的文章Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference

在你的情况下，@ Junhana提到传递引用应该解决问题

获取图像的实际宽度/高度，而无需使用javascript将图像加载到页面中

2 个答案:

问题

解决方案

说明

其他