2

サイトの「特徴的な」色を取得できないかと考えています。たとえば、TechCrunch は緑、ReadWriteWeb は赤、CNN も赤、Microsoft は青み、PHP は紫など...

正確である必要はありません。最良の推測にすぎません。

私が心に留めているいくつかのこと：

  • すべての CSS ルールを解析し、最も多くの要素に一致するルールを見つけます
  • すべての css ルールを解析し、最大の寸法を持つ要素の背景色を見つけます
  • body要素の背景画像を取得し、その主な色を取得します（これは画像で可能ですか）
  • どういうわけかサイトの「ヘッダー」(背景の css 属性が設定された DOM の最初の要素?) を見つけて、その背景を取得する

また、黒、グレー、白を除去する方法も必要です。

これは実現可能ですか？他にアイデアはありますか？

PS私の英語でごめんなさい

4

4 に答える 4

5

実現可能です、間違いなく。このwgetツールといくつかの単純な正規表現を使用して、CSS の色を解析できます。次に、それらすべての色を収集して、どの色が最も使用されているかを確認できます。ただし、多くの CSS ルールで複数の色が使用されていても、頻繁には使用されない可能性があるため、Web サイトで実際に支配的な色を常に適切に表現できるとは限りません。

これは実際、ここにある重要なプロジェクトです。

私のアプローチは次のようになります。

  • CSS の色をダウンロードして解析し、さまざまな色の合計数を探します。色がほとんどない場合は、優勢な色を見つけた可能性が高くなります。<a>多くの場合、タグまたはタグに使用される色<h1>です (ただし、グレーまたは黒/白の場合はそうではありません)。
  • #FFEEEE解析するときは、たとえばが と同じになるように色を「プール」する必要があり#FFEAEAます。
  • 、、、、などのように#FFF、異なる CSS カラーを同じフォーマットに入れる必要があります。#FFFFF"white"rgb(255,255,255)
  • これにはルールセットとプログラミングの十分な知識が必要です
  • 画像の主要な色を見つけることは、もはや簡単ではありません。最も単純なアプローチは、すべてのピクセルの R、G、および B の各コンポーネントについて、どれが優勢であるかを判断することです。ピクセルの値が の場合R(120), G(240), B(80)、ほとんどの場合緑色になります。次に、これをすべてのピクセルについてカウントし、主要なコンポーネントを見つけます。
  • @mu は、値を HSV に変換して色相のみを抽出するには短すぎることをお勧めします。
  • 別の高度な方法には、3 つの色成分のヒストグラムを作成し、ヒストグラムの下の面積を計算することが含まれます。

要約すると、私の意見では、あなたが定義しているタスクは論文の価値があります:)

于 2011-01-12T14:40:01.590 に答える
2

わかりました、ここにいくつかの非常に非正統的なアプローチがあります：

スクリーン キャプチャ パッケージ [1][2] を使用して、指定された URL をラスター イメージ (PNG など) にレンダリングします。平均を探している場合は、平均のピクセルをサンプリングして結果のラスタ​​ー画像を分析するか、ピクセルを「色グループ」にグループ化するためのしきい値を指定します。色グループの平均または最大出現数 (使用する方法は、最も重要なことに応じて異なります) を使用すると、ページ内の支配的な色をかなり正確に表現できます。

[1] http://cutycapt.sourceforge.net/ [2] http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html

于 2011-01-12T16:37:58.483 に答える
1

Node.js、Phantomjs、Color-Thief の使用

依存関係: Node-canvas ( Cairoに依存)、Webshot (Phantomjs に依存)、Color-thief、個々のパッケージ ページにリストされているマイナーな依存関係。

Webshot は、ヘッドレス Webkit Phantomjs の軽量ラッパーです。
これを使用して、ページのスクリーンショットを撮り、ストリームに保存できます。プロジェクト Github からのサンプル コードは以下のとおりです。

var webshot = require('webshot');
var fs      = require('fs');

webshot('google.com', function(err, renderStream) {
  var file = fs.createWriteStream('google.png', {encoding: 'binary'});

  renderStream.on('data', function(data) {
    file.write(data.toString('binary'), 'binary');
  });
});

次に、必要なデータを抽出する Color-thief に画像を渡すことができます。例については、プロジェクト サンプル ページを参照してください。

于 2014-02-16T13:59:41.083 に答える
1

スクリーンショットを撮り、 GD libのようなものでその画像の主な色を抽出するのはどうですか?

于 2011-01-12T17:04:04.953 に答える