jquery - 采样非常左上角的像素颜色

Question

我有一个渐变，我强行放在图像上，例如：

我需要对图像的左上角像素进行采样，以便可以使标题的背景颜色与图像相同。

这是我尝试过的，似乎很接近，但并不完全准确......

elem = document.createElement('canvas'); 
isCanvasSupported = !!(elem.getContext && elem.getContext('2d')); 


analyseAndDraw($('img#load').get(0));    


function analyseAndDraw(image) { 
  if (isCanvasSupported) {
      // Create the canvas and context
      var can = document.createElement('canvas');
      var ctx = can.getContext('2d');

      // Set the canvas dimensions
      $(can).attr('width', image.width);
      $(can).attr('height', image.height);

      // Draw the image to the canvas
      ctx.drawImage(image, 0, 0, image.width, image.height);



      var data = ctx.getImageData(0, 0, 1, 1).data;    

      var newColour = 'rgb(' + [data[0], data[1], data[2]] + ')';


      //Set the header background to the average RGB value
      $('body').css('background', newColour);    

  } else {
      $('body').css('background', 'transparent');
  }
}

我究竟做错了什么？

Answer 1

颜色构造不对。它应该是

var newColour = 'rgb(' + [data[0]+ ',' + data[1] + ',' + data[2]] + ')';

Answer 2

您需要像这样用逗号分隔 rgb

rgb('RED COLOR VALUE' , 'GREEN COLOR VALUE' , 'BLUE COLOR VALUE');

老的 ：

var newColour = 'rgb(' + [data[0], data[1], data[2]] + ')';

新的 ：

var newColour = 'rgb(' + [data[0]+ ',' + data[1] + ',' + data[2]] + ')';