Я попытался получить цвет пикселей на изображении. Я нашел код здесь: Как получить пиксельный 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>
Я попытался получить цвет пикселей на изображении.
Ошибка:
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']");
Это связано с тем, что ваш 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
}
Вы предоставляете атрибут 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
src
img