Click here to Skip to main content
14,237,550 members

Uncaught IndexSizeError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The source width is 0.

Rate this:
5.00 (3 votes)
Please Sign up or sign in to vote.
5.00 (3 votes)
4 Oct 2016CPOL
We will discuss a problem that I recently came across while working with images in coding.

Introduction

In this post, we will discuss a problem which I recently came across while working with images in coding.

Background

The job 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 plug in, but let’s not go into that. We will directly come to the point where this problem can happen.

Problem

So, the line that we are talking about is like below:

var canvas = canvas.getContext('2d')
                   .getImageData(0, 0, imgWidth, imgHeight);

We are sending image width and height to getImageData. However, if you analyze the error message, it says that width is 0.

Solution

With further research on developer console while debugging, I found that the width and height are actually populated in some other properties named as naturalWidth and naturalHeight.
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)
Returns an unsigned long representing the intrinsic height of the image in CSS pixels, if it is available; else, it shows 0.
HTMLImageElement.naturalWidth (Read only)
Returns an unsigned long representing the intrinsic width of the image in CSS pixels, if it is available; otherwise, it will show 0.

Feedback

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)
Software Developer Mindfire Solutions
India India
Official Facebook Page - Tadit Dash

Proud Indian | Microsoft MVP | CodeProject MVP | Speaker | Author | DZone Most Valuable Blogger | Community Expert | Moderator | jsfiddler | Cook | Dancer

Currently working @Mindfire Solutions.
Love to code and help guys to Trap the Bug.

My Tech Blog

taditdash.wordpress.com

Programming Community Profiles


jsfiddle | Stack Overflow

Other Blog Profiles

Mindfire CRM Team Blog | Mindfire Blog

Social Profiles

Facebook | Twitter | LinkedIn | Google+

Awards

  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013
  7. </

Comments and Discussions

 
Questionthanks! Pin
naavid200017-Apr-18 3:31
membernaavid200017-Apr-18 3:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Technical Blog
Posted 4 Oct 2016

Stats

9.1K views
1 bookmarked