web-dev-qa-db-ja.com

画像の暗い/明るい検出クライアント側のスクリプト

クライアント側のスクリプトを使用して画像（htmlを含む）の明暗を検出するために利用できるスクリプトがあるかどうか誰かが知っていますか？

基本的には、背景で使用されている画像の種類（暗い/明るい）を検出し、CSS/HTML/Jquery/JSで暗い（明るい/間違っている）変数に基づいてページを適応させる必要があります。

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

前もって感謝します。

javascriptimagecanvasclient-side
21
Redox

この関数は、各色をグレースケールに変換し、すべてのピクセルの平均を返すため、最終値は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/

53
lostsource

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

まず、RGBチャネルの合計の平均値の結果を（簡単に）分析する必要があります。人間にとっては意味がありません。ピンクは緑より明るいですか？つまり、（0、255、0）に（255、0、255）よりも低い輝度値を指定したいのはなぜですか？また、ミッドグレー（128、128、128）はミッドグリーン（128、255、0）と同じように明るいですか？これを考慮するために、HSV色空間で行われているように、チャネルの色の明るさのみを扱います。これは単に、指定されたRGB 3成分の最大値です。

残りはヒューリスティックです。 iについて、max_rgb = max(RGB_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/328/ にあります。非常に簡単です。私の表記に怖がらせないでください。

29
mmgp

バックグラウンドチェックと呼ばれるスクリプトは、画像の明暗を検出できます。それにはJavaScriptを使用します。

ここにリンクがあります：

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

このタイプの検出機能を備えたスライダーを作りたいと思っている人を助けることを願っています。

7
dan wright

MarvinJ は、指定された画像の平均色を取得するメソッドaverageColor（image）を提供します。平均的な色を使用して、画像上のラベルの色を定義するルールを作成できます。

画像の読み込み：

var image = new MarvinImage();
image.load("https://i.imgur.com/oOZmCas.jpg", imageLoaded);

平均的な色を取得する：

var averageColor = Marvin.averageColor(image2); // [R,G,B]

この投稿のスニペットの出力：

enter image description here

var canvas = document.getElementById("canvas");
var image1 = new MarvinImage();
image1.load("https://i.imgur.com/oOZmCas.jpg", imageLoaded);
var image2 = new MarvinImage();
image2.load("https://i.imgur.com/1bZlwv9.jpg", imageLoaded);
var loaded=0;

function imageLoaded(){
  if(++loaded == 2){
    var averageColor;
    averageColor = Marvin.averageColor(image1);
    setText("LION", averageColor, "text1");
    averageColor = Marvin.averageColor(image2);
    setText("LION", averageColor, "text2");
  }
}

function setText(text, averageColor, id){
  if(averageColor[0] <= 80 && averageColor[1] <= 80 && averageColor[2] <= 80){
     document.getElementById(id).innerHTML = "<font color='#ffffff'>"+text+"</font>";
  }
  else if(averageColor[0] >= 150 && averageColor[1] >= 150 && averageColor[2] >= 150){
     document.getElementById(id).innerHTML = "<font color='#000000'>"+text+"</font>";
  }
  
}
.divImage{
  width:400px; 
  height:268px;
  display:grid;
}

.divText{
  font-family:Verdana;
  font-size:56px;
  font-weight:bold;
  margin:auto;
  display:table-cell;
}
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<div id="result"></div>
<div style="background-image:url(https://i.imgur.com/oOZmCas.jpg);" class="divImage">
   <div id="text1", class="divText"></div>
</div>
<div style="background-image:url(https://i.imgur.com/1bZlwv9.jpg);" class="divImage">
   <div id="text2", class="divText"></div>
</div>
1
Gabriel Ambrósio Archanjo