이미지 어두운/빛 감지 클라이언트 쪽 스크립트

Question

클라이언트 쪽 스크립트를 사용하여 이미지의 어둡거나 밝음 (html 포함)을 감지하는 데 사용할 수있는 스크립트가 있는지 아는 사람 있습니까?

기본적으로 백그라운드에서 사용되는 이미지 유형 (어둡거나 밝은)을 감지하고 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, 128, 128)은 중간 녹색 (128, 255, 0)처럼 밝습니까? 이를 고려하기 위해 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

백그라운드 체크 스크립트는 이미지의 어둡기/밝기를 감지 할 수 있습니다. 그렇게하기 위해 자바 스크립트를 사용합니다.

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

나는 그게 내에서 감지 이러한 유형의 슬라이더를 만들기 위해 원하는 사람을 도움이되기를 바랍니다 : 여기에

은에 대한 링크입니다.