In this post, we will discuss a problem, which I recently came across while working with images in coding.
The work was to take one image from the file upload control and then compress it using Canvas before uploading it to the server. I used a plugin, but let’s not go into that. We will directly come to the point where this problem can happen.
So, the line that we are talking about is like below.
var canvas = canvas.getContext('2d') .getImageData(0, 0, imgWidth, imgHeight);
We are sending the image width and height to getImageData. However, if you analyze the error message, it says that the width is 0.
With further research on the developer console, while debugging, I found that the width and height are actually populated in some other properties named as
Therefore, we can write the code like below.
var imgWidth = image.width || image.naturalWidth; var imgHeight = image.height || image.naturalHeight; var canvas = canvas.getContext('2d') .getImageData(0, 0, imgWidth, imgHeight);
Now your program should work as expected without errors.
More on naturalHeight and naturalWidth from MDN
HTMLImageElement.naturalHeight (Read only)
unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows
HTMLImageElement.naturalWidth (Read only)
unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show
If you like this blog, feel free to share it in your circle and save someone’s time. Please comment below, if you have any inputs for me.
Thanks for reading. Have a nice day ahead.