画像暗闇/光検出クライアント側のスクリプト

Question

クライアント側のスクリプトを使用して、画像の暗闇や明るさを検出するためのスクリプトがあるかどうかは知っていますか？

私は基本的に、バックグラウンドで使用されている画像のタイプ（暗い/明るい）を検出し、CSS/HTML/Jquery/JSに光の暗い偽）。

私は利用可能なサーバー側のスクリプトがあることを知っていますが、この特定の開発には使用できません。

ありがとうございます。

Answer 1

グレースケールと全画素の平均値を返し、最終的な値は、0（最も暗い）から255（最も明るい）

function getImageLightness(imageSrc,callback) { 
    var img = document.createElement("img"); 
    img.src = imageSrc; 
    img.style.display = "none"; 
    document.body.appendChild(img); 

    var colorSum = 0; 

    img.onload = function() { 
     // create canvas 
     var canvas = document.createElement("canvas"); 
     canvas.width = this.width; 
     canvas.height = this.height; 

     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(this,0,0); 

     var imageData = ctx.getImageData(0,0,canvas.width,canvas.height); 
     var data = imageData.data; 
     var r,g,b,avg; 

     for(var x = 0, len = data.length; x < len; x+=4) { 
      r = data[x]; 
      g = data[x+1]; 
      b = data[x+2]; 

      avg = Math.floor((r+g+b)/3); 
      colorSum += avg; 
     } 

     var brightness = Math.floor(colorSum/(this.width*this.height)); 
     callback(brightness); 
    } 
} 

使用の間となり、各色に変換されます。この関数：

getImageLightness("image.jpg",function(brightness){ 
    console.log(brightness); 
}); 

JSFiddle：

http://jsfiddle.net/s7Wx2/

Answer 2

私の答えの再利用ほとんどのコードは@ lostsourceの答えにありますが、暗い画像と明るい画像を区別するために別の方法を使用しています。

まず、RGBチャネルの合計の平均値の結果が何であるかを分析する必要があります。人間にとっては無意味です。ピンクは緑よりも明るいですか？つまり、（255、0、255）よりも低い輝度値を与える（0、255、0）必要がありますか？また、ミッドグレー（128,125,0）のように真ん中のグレー（128,128,128）明るいですか？これを考慮するために、私はHSV色空間で行われるように、チャンネルの色の明るさにのみ対処します。これは、単に与えられたRGBトリプレットの最大値です。

残りはヒューリスティックです。何点かmax_rgb = max(RGB_i)をiにしましょう。 max_rgbが128よりも小さい場合（8bppイメージを仮定）、新しい点が見つかったi、それ以外は暗いです。すべての点iでこれを行うと、明るいところはA、暗いところはBになります。 (A - B)/(A + B) >= 0ならば、画像は明るいと言う。すべての点が暗い場合は、-1の値が得られます。逆に、すべての点が軽い場合は+1になります。以前の数式は微調整できますので、画像をほとんど暗くすることができます。コードでは、変数にfuzzyという名前を付けましたが、画像処理のfuzzyフィールドには正義がありません。したがって、(A - B)/(A + B) + fuzzy >= 0の場合、画像は明るいと言います。

コードはhttp://jsfiddle.net/s7Wx2/7/にありますが、それは非常に簡単です。私の表記があなたを恐れることはありません。

Answer 3

背景チェックと呼ばれるスクリプトは、画像の暗さ/明度を検出できます。これはJavaScriptを使用して行います。ここで

は、それへのリンクです：

http://www.kennethcachia.com/background-check/

私はそれはそれ内の検出このタイプのスライダーを作るたい人に役立ちます願っています。