이미지에디터에 캔버스에 필터가 중첩으로 적용이 안 되는 것 같습니다.

[easylogic]

필터 4개가 다 따로 적용 되는 것 같습니다.
필터 설정한 순서대로 순차적으로 적용할 수 있나요?

[sangbooom]

안녕하세요.

현재 필터 중첩적용을 해결하기위한 방안을 찾고 있는 상태입니다.

제가 구현한건 range bar로 필터 조절 할 떄마다 초기 이미지의 상태를 불러와서 현재 value만큼 해당 필터 알고리즘에 적용 시켜주고 있습니다.

 , filterControl : function ( filterType, filterValue ) {

        console.log( filterValue );
        this.drawImage();

        var imgData = this.ctx.getImageData(0, 0, Math.round( this.currentWidth*this.zoomValue ), Math.round( this.currentHeight*this.zoomValue ) );
        var filteredData;
        switch ( filterType ){
            case "brightness" : filteredData = this.getFilterBrightness(imgData, filterValue ); break;
            case "contrast" : filteredData = this.getFilterContrast(imgData, filterValue ); break;
            case "blur" : filteredData = this.getFilterBlur(imgData, Math.round( this.currentWidth*this.zoomValue ), Math.round( this.currentHeight*this.zoomValue ), filterValue, false ); break;
            case "sharpen" : filteredData = this.getFilterSharpen(imgData, filterValue ); break;
        }

        if( filteredData ){
            this.ctx.putImageData(filteredData, 0, 0);
        }
    }

다른 필터들도 적용 했을떄 중첩적용이 되지않는 문제를 해결하기 위해 toDataURL() 함수를 통해서 해결하려고
시도해봤습니다. 필터로 바뀐 이미지 상태를 계속 저장해서 바꾸면 다른 필터와 중첩적용이 되긴 하는데,
필터가 적용된 이미지가 원복이 되지 않는 상태가 되어서 해결을 하지 못했습니다. 아직 좋은 해결 방안을 찾지 못해서
저도 고민중에 있습니다. 해결 되는대로 코멘트 드리도록 하겠습니다. 혹시나 좋은 해결방안이 있으면 공유 부탁 드립니다.

...
if( filteredData ){
    this.ctx.putImageData(filteredData, 0, 0);
}
    this.img.src = this.canvas.toDataURL(); //다른 필터들도 적용시키기 위해
...

감사합니다.

[easylogic]

  switch ( filterType ){
            case "brightness" : filteredData = this.getFilterBrightness(imgData, filterValue ); break;
            case "contrast" : filteredData = this.getFilterContrast(imgData, filterValue ); break;
            case "blur" : filteredData = this.getFilterBlur(imgData, Math.round( this.currentWidth*this.zoomValue ), Math.round( this.currentHeight*this.zoomValue ), filterValue, false ); break;
            case "sharpen" : filteredData = this.getFilterSharpen(imgData, filterValue ); break;
        }

요기 코드 부분을 filterType 에 따라 하나씩 실행하지 말고 전체를 다 실행하는건 어떨까요?

filter 마다 순서가 있다고 친다면

filteredData = imgData; 
filteredData = this.getFilterBrightness(filteredData, filterValue ); 
filteredData = this.getFilterContrast(filteredData, filterValue );
filteredData = this.getFilterSharpen(filteredData, filterValue ); 
filteredData = this.getFilterBlur(filteredData, Math.round( this.currentWidth*this.zoomValue ), Math.round( this.currentHeight*this.zoomValue ), filterValue, false ); 

filter 마다 구조가 다 다르긴 하지만 결국은 픽셀 이미지 데이타를 그대로 쓸 거라, 다른 필터 결과물로 나온 데이타도 똑같이 이미지가 되기 때문에 연결 해서 사용하셔도 될 것 같아요.

[sangbooom]

말씀하신대로 실행해봤으나 이미지가 그려지지 않습니다.

Brightness를 컨트롤 할떄 filterControl()에서 매개변수로 가져온 value값이 25라고 가정해보면

filteredData = this.getFilterBrightness(filteredData, filterValue );  // filterValue = 25
filteredData = this.getFilterContrast(filteredData, filterValue ); // filterValue = 25
filteredData = this.getFilterSharpen(filteredData, filterValue );  // filterValue = 25
filteredData = this.getFilterBlur(filteredData, Math.round( this.currentWidth*this.zoomValue ), Math.round( this.currentHeight*this.zoomValue ), filterValue, false ); // filterValue = 25

모든 filteredData에 filterValue값이 25가 들어가게 됩니다. 하지만 range 범위가 각자 다 다르고 증가값에 따른 필터 알고리즘 변화수치도 다 각자 다르기때문에 제대로 실행이 되지않습니다.

혹시 제가 말한 부분이 틀렸거나 말씀해주신 의견과 다른 방향으로 이해해서 말했다면 코멘트 부탁드립니다.

감사합니다.

[easylogic]

아~ 저기 filterValue 는 정해주신 코드에 있던 거라 그대로 가지고 온거고...
실제로는 화면상에 있는 필터 속성들을 가지고 넣어주셔야 하지 않을까 합니다.

filteredData = this.getFilterBrightness(filteredData, brightnessFilterValue );  

그리고 코드를 좀 보고 있는데요.

필터 적용할 때 clearRect 를 하시던데 이유가 있으신가요?

[sangbooom]

getFilterBrightness 함수에서 clearRect를 해줄 필요가 없네요..

불필요한 코드로 생각되어 삭제했습니다.

코드 리팩토링 감사합니다.

, getFilterBrightness: function (pixels, value) {
        var d = pixels.data;
        // this.ctx.clearRect(0, 0, Math.round( this.currentWidth*this.zoomValue ), Math.round( this.currentHeight*this.zoomValue ));

        for(var i=0; i< d.length; i+=4) {
            d[i] += 255 * (value / 100);
            d[i+1] += 255 * (value / 100);
            d[i+2] += 255 * (value / 100);
        }
        return pixels;
    }

그리고 말씀해주신 속성필터값들로 바꿔보고 다시 코멘트 드리겠습니다.