HTML5 Canvas에서 레벨을 조정하려면 어떻게해야합니까?

Question

나는 psd 파일을 가지고 있는데 나는 psd에있는 것과 비슷한 캔버스에 이미지를 만들었다. Photoshop에서 이미지에 적용되는 필터 중 하나는 "레벨"입니다.

Canvas 이미지 조작 라이브러리 - CamanJS를 사용하고 있습니다.

필자의 발견에 따르면 Photoshop의 레벨은 캔버스의 색상 교정이지만 CamanJS에서는 그 어떤 API도 볼 수 없습니다.

우리가 할 수 있다면 어떨까요? 이 작업을 쉽게하면 다른 라이브러리에 열려 있습니다.

미리 감사드립니다.

Answer 1

CamanJS를 사용하면 Photoshop의 "레벨"과 같은 이미지 조정 작업을 할 수 있습니다.

• 밝기
• 대비
• 컬러 채널 여기

포토샵의 레벨 조정의 CamanJS 근사치입니다 :

포토샵 "수준"조정은 실제로 3 명 주 조정의 조합입니다 :

// Combining contrast, brightness & channels 
// to simulate a Photoshop "levels" adjustment 

Caman("#image", function() { 

    this 

    // adjust contrast (-100 to 100) 

    .contrast(contrastAdjustment) 

    // adjust brightness (-100 to 100) 

    .brightness(brightnessAdjustment) 

    // adjust colors (-100 to 100 for r,g,b) 

    .channels({red:5, green: 0, blue: 0}) 

    // and render the filtered image 

    .render(); 

}); 

PS의 히스토그램 컨트롤과 같은 범위 내에서 Photoshop이 이러한 값을 고정 시키려면 CamanJS "curves"를 사용하여 시작할 수 있습니다. 그러나 필터 효과를 미세 조정하려면 사용자 정의 필터를 만들어야합니다. CamanJS에서는 다음과 같이 맞춤 필터를 정의 할 수 있습니다.

// create a custom process to clamp Red between low/high values 

Caman.Filter.register("ClampRed", function (low,high) { 
    this.process("ClampRed", function (rgba) { 
     rgba.r = Math.min(low,Math.max(high)); 
     return rgba; 
    }); 
});