javascript - getImageData 未使用 data-src 获取图像的 RGB 值

Question

我正在尝试使用 getImageData 根据图像的颜色来操作一个类。我使用下面的代码获取图像，但它返回 RGB 值 0,0,0。它最初在 img 标签使用 src 属性时工作，但由于我已将其更改为 data-src 以便延迟加载，它现在返回 R:0 G:0 B:0 A:0

有人可以帮忙吗？

var img = document.getElementById('hero-image');

  console.log(img);

    if(img !== null) {

    var canvas = document.createElement('canvas');

    canvas.width = img.width;
    canvas.height = img.height;

    console.log(canvas.width);

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

              console.log(canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height));

    var pixelData = canvas.getContext('2d').getImageData(1, 1, 1, 1).data;

              console.log(pixelData);

    console.log('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);

    var avg = (pixelData[0] + pixelData[1] + pixelData[2]) / 3;

    if (avg < 100) {
        console.log('dark');
        $('.main-nav').removeClass('navbar-light');
      }
    else {
        console.log('light');
        $('.main-nav').removeClass('navbar-dark');
        $('.main-nav').addClass('navbar-light');
    }
  }

$(document).ready(function() {
  init();
});

function init() {
  ImageSliders();
  initContactForm();
  typedBanners();
  scrollingAnimations();
  navBarHide();
  animateOnLoadPosition();
  lazyLoadImages();
  navbarColour();
  openSubscribePanel();
};

Answer 1

调用$(window).load()事件中的函数