0

画像に強制的に配置しているグラデーションがあります。例:

ここに画像の説明を入力

ヘッダーの背景色を画像と同じにするために、画像の左上のピクセルをサンプリングする必要があります。

これが私が試したことです。近いようですが、完全に正確ではありません...

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

私は何を間違っていますか？

4

2 に答える 2

1

色の構成が正しくありません。そのはず

var newColour = 'rgb(' + [data[0]+ ',' + data[1] + ',' + data[2]] + ')';
于 2013-07-01T05:55:39.373 に答える
1

このように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]] + ')';
于 2013-07-01T06:05:14.460 に答える