Question

I’m loading in an image into memory per a solution I found on here, and that’s fine, but since it’s within a callback, the properties width and height are undefined outside of it.

var originalWidth, originalHeight;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        originalWidth = this.width;   // Note: $(this).width() will not
        originalHeight = this.height; // work for in memory images.
    });
console.log(originalWidth); // undefined obviously since `this` is only accessible within `load`s callback. 

I thought about maybe putting it within an object like:

var originalWidth, originalHeight;
var imgDimensions = {};
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        imgDimensions.originalWidth = this.width;   // Note: $(this).width() will not
        imgDimensions.originalHeight = this.height; // work for in memory images.
    });
console.log(imgDimensions['originalWidth']); // undefined also

How can I return those properties from within load()?

Answer 1

Since you do not know nor can you control when the callback will run, you cannot guarantee that the value will be available for your call to log.

Depending on what you want to do with the dimensions, one solution might be to add an onload event handler to your img tag so you can access the values once the item has actually been loaded.