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

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');

OLD：

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

新：

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