Ошибка JavaScript: не удается прочитать свойство 'width' со значением NULL

1

Я попытался получить цвет пикселей на изображении. Я нашел код здесь: Как получить пиксельный x, y координатный цвет от изображения? ,

Ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'width' от 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>
  • 0
    Ваш идентификатор элемента изображения слишком длинный для этого, я думаю, это не идентификатор, это src
  • 0
    id это не URL .. это идентификатор элемента в вашем HTML-теге img
Показать ещё 2 комментария
Теги:
image
canvas
colors
pixels

3 ответа

0

Я попытался получить цвет пикселей на изображении.

Ошибка:

Uncaught TypeError: Невозможно прочитать свойство 'width' от 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']");
0

Это связано с тем, что ваш 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
    }
0

Вы предоставляете атрибут src изображения, а не id.

Если ваш элемент имеет идентификатор, то это очень просто, вы просто указываете его:

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

Если ваш элемент не имеет идентификатора, я рекомендую вам добавить его к нему, если вы хотите получить доступ к нему из JavaScript.

Если ваш элемент не имеет идентификатора, и вы не можете его добавить, попробуйте это решение:

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню