JavaScript 错误 : Cannot read property 'width' of null

Question

我试图获取图像上像素的颜色。我在这里找到了代码:How to get a pixel's x,y coordinate color from an image? 。

错误:

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.

看起来您想通过src 属性来选择图像。请改用 querySelector，因为您不太可能拥有具有此 id 的图像。

然后替换这一行

 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 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']");