When new image is created, image.width returns 0
Question
The code below says that spike.image.width = 0 . Why is this? I'm probably missing something that is obvious.
class Spike { constructor(x = 200, y = 200) { this.x = x; this.y = y; this.image = new Image(); this.image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIBO-v6hQoEBhzmZ05mKzgYqrsZ0svgsED7IDR4dIVNxc78uc2"; } } const ctx = document.getElementById("canvas").getContext("2d"); const spike = new Spike; console.log(spike.image.width);
<!DOCTYPE html> <html> <head> <link href="css/default.css" rel="stylesheet" /> </head> <body> <canvas id="canvas" width="400" height="600"></canvas> <script src="js/main.js"></script> </body> </html>
1 answers
solution1
2 ACCPTED 2018-07-01 05:59:12
When the console.log fires, the image hasn't fully loaded yet. You have to check for when the image has loaded
const spike = new Spike;
spike.image.onload = function()
{
console.log(spike.image.width);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Image.width gives 0
Image.width on IE browsers
Image.width and Image.height equal to 0 after I load images (javascript)
JavaScript Image().width returns 0
getBoundingClientRect() returns 0 for width and height of image
Image width after load returns 0
Jquery occasionally returns zero height and width on image
decrease image width when browser width decrease
control image width and height when upload image
Why loading naturalWidth of an image returns the width of previously uploaded image?
Related Tags