캔버스의 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를 만드는 것입니다.
이미지 링크가 잘립니다. – millimoose
또한 도움이 필요한 것이 명확하지 않습니다. HTML '
출력 흰색은 255 이상의 값으로 설정하는 것을 의미합니다. 출력 검정 아래의 항목은 모두 0으로 쉽습니다. 입력이 어렵고 미드 톤 밸런서는 언급하지 않습니다. 입력을 사용하면 inpWhite-inpBlack에 0-255의 배율을 조정할 수 있습니다. 각 픽셀에 대해 128 미만이면 픽셀 수준에 눈금을 곱하십시오. 128 이상이면 1/눈금을 곱하십시오. 마지막으로, 안전을 위해 min (255, p) 및 max (0, p). – dandavis