Javascript error: Cannot read property 'width' of null

Question

I tried to get the color of pixels on an image. I found the code here: How to get a pixel's x,y coordinate color from an image? .

Error:

Uncaught TypeError: Cannot read property 'width' of null.

<canvas id="main"></canvas>    

<script>

    var img = document.getElementById("https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png");
    var canvas = document.createElement("main");

    canvas.width = img.width;     //<-- error her
    canvas.height = img.height;

    pix = canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);







</script>

Answer 1

I tried to get the color of pixels on an image.

Error:

Uncaught TypeError: Cannot read property 'width' of null.

Looks like you want to select the image by its src property. Use querySelector instead since it is unlikely that you have an image with this id .

Then replace this line

 var img = document.getElementById("https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png");

by

var img = document.querySelector("img[src='https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png']");

Answer 2

This is because your script might be in the head or your image is getting loaded slowly so that it's getting executed after the script is run.

Use this:

    var img = new Image();
    img.src = "https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png"
    img.onload = function(){
      var height = img.height;
      var width = img.width;

      // code here to use the dimensions
    }

Answer 3

You are providing the image's src attribute, not the id .

If your element has an ID, then it's very simple, you just specify it:

var img = document.getElementById("yourImgId");

If your element does not have an ID, I recommend you add one to it if you're going to access it from JavaScript.

If your element does not have an ID, and you cannot add it, then try this solution:

function getImgBySrc(src) {
    var allImages = document.getElementsByTagName("img");
    for(var i = 0; i < allImages.length; i++)
        if (allImages[i].src === src) {
            return allImages[i];
        }
    }
}

And then:

var img = getImgBySrc("https://static.wixstatic.com/media/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png/v1/fill/w_980,h_735,al_c,usm_0.66_1.00_0.01/50592f_dca6acd5bb474e61b306e1969e7e8f66~mv2_d_2339_1654_s_2.png");

canvas.width = (img && img.width) || 200; // Provide a default width if image was not found
canvas.height = (img && img.height) || 400; // Provide a default height if image was not found