如何获取存储在javascript对象中的图像的宽度和高度？

Question

I am looking of a way to find the dimensions of the passed in image. When I log the height and width it returns 0 for both.

function GamePiece(imageName){
    this.image = new Image();
    this.image.src = imageName;
    this.width = this.image.width;
    this.height = this.image.height;
}

Answer 1

You need to allow the browser time to load the image before you can get it's size. You can use the onload callback to detect when the image is loaded.

function GamePiece(imageName){
    var gamePiece = this;

    this.image = new Image();
    this.image.onload = function() {
        gamePiece.width = this.width;
        gamePiece.height = this.height;
    }
    this.image.src = imageName;
}

There will be a delay before the callback is run and the dimensions are set on your object.