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（）事件内的函数

getImageData不使用data-src拾取图像的RGB值

1 个答案: