2013-06-14 1 views
1

이러한 문제가 있습니다. 포토샵과 같이 레벨에 대한 보정 할 수있는 기능을 구현해야합니다Photoshop과 같은 기능적 "수준"구현

http://www.atpm.com/13.04/images/photoshop-05-levels.png

문제는이 : 이미지의 각 픽셀에 대한 모든 데이터가,이 사용자 InputWhite, InputBlack가 입력 한 데이터, OutputWhite, OutputBlack. (그림 참조).

각 픽셀 (RGB)마다 3 개의 채널을 개별적으로 변경해야합니다.

어떻게 변경할 수 있습니까? 내가 이해할 수없는. 미리 감사드립니다.

+0

이미지 링크가 잘립니다. – millimoose

+0

또한 도움이 필요한 것이 명확하지 않습니다. HTML ''에서 픽셀을 조작하는 데 도움이 필요합니까? 또는 Photoshop에서 사용하는 알고리즘을 알려줄 사람이 필요합니까? (후자는 매우 좋지 않은 질문이 될 것입니다.) – millimoose

+1

출력 흰색은 255 이상의 값으로 설정하는 것을 의미합니다. 출력 검정 아래의 항목은 모두 0으로 쉽습니다. 입력이 어렵고 미드 톤 밸런서는 언급하지 않습니다. 입력을 사용하면 inpWhite-inpBlack에 0-255의 배율을 조정할 수 있습니다. 각 픽셀에 대해 128 미만이면 픽셀 수준에 눈금을 곱하십시오. 128 이상이면 1/눈금을 곱하십시오. 마지막으로, 안전을 위해 min (255, p) 및 max (0, p). – dandavis

답변

0

캔버스의 imageData을 사용하여 개별 픽셀의 RGB 값을 수정할 수 있습니다.

각 화소의 RGB의 각 G의 값에 30을 부가 이렇게 수있는 모든 화소의 녹색 "채널", "증가"으로 예컨대

:

var imageData = ctx.getImageData(0,0,can.width, can.height); 
var pixels = imageData.data; 
var numPixels = pixels.length; 

ctx.clearRect(0, 0, can.width, can.height); 

for (var i = 0; i < numPixels; i++) { 
    var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3; 
    // set red green and blue pixels to the average value 
    pixels[i*4] = 0; 
    pixels[i*4+1] += 30; 
    pixels[i*4+2] += 0; 
} 
ctx.putImageData(imageData, 0, 0); 

예 :

http://jsfiddle.net/YxYuF/

거기에서 사용자에게 표시 할 좋은 UI를 만드는 것입니다.

+0

It 's 내가 필요로하는 것이 아니다. 나는 값을 바꿀 수있다. 하지만 어떤 알고리즘을 모르는가? –

관련 문제