Javascript 错误：无法读取 null 的属性“宽度”答案

【问题标题】：Javascript error: Cannot read property 'width' of nullJavascript 错误：无法读取 null 的属性“宽度”
【发布时间】：2018-05-11 17:28:17
【问题描述】：

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

错误：

未捕获的类型错误：无法读取 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>

【问题讨论】：

你的图片元素ID太长了，我猜不是ID，是src
id 不是 URL。它是你的 html img 标签中的元素 id
您需要在此处传递您的src 元素ID：var img = document.getElementById/ 不是您图片的完整网址！
Good to know 关于画布中的第三方图像。

标签： javascript image canvas colors pixels

【解决方案1】：

您提供的是图像的src 属性，而不是id。

如果你的元素有一个ID，那么很简单，你只需指定它：

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

如果您的元素没有 ID，如果您打算从 JavaScript 访问它，我建议您添加一个。

如果您的元素没有 ID，并且无法添加，请尝试以下解决方案：

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

然后：

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

【讨论】：

【解决方案2】：

这是因为您的script 可能在head 中，或者您的图片加载缓慢，以便在脚本运行后执行。

使用这个：

    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
    }

【讨论】：

【解决方案3】：

我试图获取图像上像素的颜色。

错误：

未捕获的类型错误：无法读取 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']");

【讨论】：