this._best() 不是函数类型错误

Question

我试图在成功加载图像后调用函数 this._best() 但我收到 typererrors。 this._best() 是一个函数，因为我在许多不同的地方使用它并且它正在工作。只要我把它放在 javascript 的 onload 事件中，它就会显示 typeError 或 referenceError。

我想在实际加载图像后获取图像的高度和宽度，然后在获得这两个值后调用 _best() 函数。

我尝试了很多方法，包括：

this.svg.onload = function() {
            this.svg.addEventListener('load', function() { 
                this._W = jQuery(".Image").width();
                this._H = jQuery(".Image").height();
                this._best();
            });
}.bind(this);

和

this.svg.addEventListener('load', function() {
                this._W = jQuery(".Image").width();
                this._H = jQuery(".Image").height();
                this._best();
            });

我设置断点以查看它在哪里中断，它总是在调用 _best() 时显示错误

我也尝试使用警报进行测试：

this.svg.onload = function() {
            this.svg.addEventListener('load', function() { alert('loaded');    });
            this._W = jQuery(".Image").width();
            this._H = jQuery(".Image").height();
            this._best();
        }.bind(this);

这成功调用_best();并在图像加载成功后显示警报。但我仍然想只获取宽度和高度的值，并在加载图像后调用 _best() 。

在这种情况下，我在第一次加载图像时得到了不正确的宽度和高度值，因为 chrome 没有正确加载图像，但是如果我再次加载它，它会从缓存中获取值并且它似乎可以工作，因此为什么我想从 onload 事件中获取宽度和高度。

在初始化函数中我有： this.canvas = document.createElement("div");

我的功能：

        this.svg = document.createElement("object");
        this.svg.setAttribute("type","image/svg+xml");
        this.svg.setAttribute("data",url);
        this.svg.setAttribute("class", "Image");
        this.canvas.appendChild(this.svg);

        this.svg.onload = function() {
             this.svg.addEventListener('load', function() { 
                this._W = jQuery(".Image").width();
                this._H = jQuery(".Image").height();
             }.bind(this);
        this._best();
        }.bind(this);

_best() 函数看起来像：

    function _best() {
      var a = this.canvas.clientWidth / this._W;
      var b = this.canvas.clientHeight / this._H;
    }

最佳拟合用于使图像居中。我在其他情况下使用此功能，所以它可以工作，但在这种情况下，当我第一次加载时，_H 和 _W 与我第二次加载时不同。我猜chrome实际上并没有完全加载图像，直到我第二次点击加载图像。

如何在加载图像时获得 _W 和 _H（就像我获得的第二个加载值一样）以及在加载时检索这两个值后如何调用 _best()？

Answer 1

您还需要将bind(this) 发送到您的addEventListener，因为它会创建另一个闭包。

所以

this.svg = document.createElement("object");
this.svg.setAttribute("type","image/svg+xml");
this.svg.setAttribute("data",url);
this.svg.setAttribute("class", "SVGImage");
this.canvas.appendChild(this.svg);

this.svg.onload = function() {
    this._W = jQuery(".SVGImage").width();
    this._H = jQuery(".SVGImage").height();
    this._best();
}.bind(this);

我还将_best定义为

this._best = function () {
  var a = this.canvas.clientWidth / this._W;
  var b = this.canvas.clientHeight / this._H;
}.bind(this);