히스토그램 처리하기

시연 영상(유튜브): https://youtu.be/xiq0ObeDjeE

---

 

<원본이미지 스트레칭처리하기>

-HSV로 원본이미지를 처리하여야 할 것 같은데 HSV중 어느 것을 당겨야 스트레칭이 되는 지 모르겠다

-진짜 아쉬운부분

알고리즘

결과화면

function stretchImage(){
        outH=inH;
        outW=inW;

        outImage = new Array(3); // 3면
            for(var m=0; m<3; m++) {
                outImage[m] = new Array(outH);
                for(let n=0; n<outH; n++)
                    outImage[m][n] = new Array(outW);
        }
        let LOW = inImage[0][0][0],HIGH=inImage[0][0][0];
        for(let rgb=0;rgb<3;rgb++){
            for(let i=0;i<inH;i++){
                for(let k=0;k<inW;k++){
                    if(LOW>inImage[rgb][i][k])
                        LOW = inImage[rgb][i][k];
                    if(HIGH<inImage[rgb][i][k])
                        HIGH = inImage[rgb][i][k];
                }
            }
        }
        for(let rgb=0;rgb<3;rgb++){
            for(let i=0;i<inH;i++){
                for(let k=0;k<inW;k++){
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                        let out = (inImage[rgb][i][k]-LOW)/(HIGH-LOW)*255.0;
                        if(out<0.0)
                            out =0;
                        else if(out>255.0)
                            out = 255;
                        else
                            out = parseInt(out);
                        outImage[rgb][i][k] = out;
                    }
                    else
                        outImage[rgb][i][k] = inImage[rgb][i][k];
                    }
                }
        }
        displayImage();
    }
    function stretchImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                stretchImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

---

<원본이미지 엔드인 처리하기>

알고리즘

결과화면

function endInImage(){
        outH=inH;
        outW=inW;

        outImage = new Array(3); // 3면
            for(var m=0; m<3; m++) {
                outImage[m] = new Array(outH);
                for(let n=0; n<outH; n++)
                    outImage[m][n] = new Array(outW);
        }
        let LOW = inImage[0][0][0],HIGH=inImage[0][0][0];
        for(let rgb=0;rgb<3;rgb++){
            for(let i=0;i<inH;i++){
                for(let k=0;k<inW;k++){
                    if(LOW>inImage[rgb][i][k])
                        LOW = inImage[rgb][i][k];
                    if(HIGH<inImage[rgb][i][k])
                        HIGH = inImage[rgb][i][k];
                }
            }
        }

        LOW+=50;
        HIGH-=50;

        for(let rgb=0;rgb<3;rgb++){
            for(let i=0;i<inH;i++){
                for(let k=0;k<inW;k++){
                    if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                        let out = (inImage[rgb][i][k]-LOW)/(HIGH-LOW)*255.0;
                        if(out<0.0)
                            out =0;
                        else if(out>255.0)
                            out = 255;
                        else
                            out = parseInt(out);
                        outImage[rgb][i][k] = out;
                    }
                    else
                        outImage[rgb][i][k] = inImage[rgb][i][k];
                    }
                }
        }
        displayImage();

    }
    function endInImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                endInImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }

 

 

 

---

<원본이미지 평활화하기>

알고리즘

 

결과화면

function equalizeImage(){
        outH=inH;
        outW=inW;

        outImage = new Array(3); // 3면
            for(var m=0; m<3; m++) {
                outImage[m] = new Array(outH);
                for(let n=0; n<outH; n++)
                    outImage[m][n] = new Array(outW);
        }
        let histoR = new Array(256);
        let histoG = new Array(256);
        let histoB = new Array(256);

        for(let i=0;i<256;i++){
            histoR[i]=0;
            histoG[i]=0;
            histoB[i]=0;
        }
        for(let i=0;i<inH;i++){
            for(let k=0;k<inW;k++){
                histoR[inImage[0][i][k]]++;
                histoG[inImage[1][i][k]]++;
                histoB[inImage[2][i][k]]++;
            }
        }

        let sumHistoR = new Array(256);
        let sumHistoG = new Array(256);
        let sumHistoB = new Array(256);

        for(let i=0;i<256;i++){
            sumHistoR[i]=0;
            sumHistoG[i]=0;
            sumHistoB[i]=0;
        }
        let sumValueR=0;
        let sumValueG=0;
        let sumValueB=0;
        for(let i=0;i<256;i++){
            sumValueR+=histoR[i];
            sumHistoR[i]=sumValueR;

            sumValueG+=histoG[i];
            sumHistoG[i]=sumValueG;

            sumValueB+=histoB[i];
            sumHistoB[i]=sumValueB;
        }

        let nomalHistoR = new Array(256);
        let nomalHistoG = new Array(256);
        let nomalHistoB = new Array(256);

        for(let i=0;i<256;i++){
            nomalHistoR[i]=0.0;
            nomalHistoG[i]=0.0;
            nomalHistoB[i]=0.0;
        }
        for(let i=0;i<256;i++){
            let nomalR = sumHistoR[i]*(1.0/(inH*inW))*255.0;
            nomalHistoR[i]=nomalR;
            let nomalG = sumHistoG[i]*(1.0/(inH*inW))*255.0;
            nomalHistoG[i]=nomalG;
            let nomalB = sumHistoB[i]*(1.0/(inH*inW))*255.0;
            nomalHistoB[i]=nomalB;
        }
        for(let i=0;i<inH;i++){
            for(let k=0;k<inW;k++){
                if((startX <= k && k< endX )&&(startY <=i && i<endY)){
                outImage[0][i][k]=parseInt(nomalHistoR[inImage[0][i][k]]);
                outImage[1][i][k]=parseInt(nomalHistoG[inImage[1][i][k]]);
                outImage[2][i][k]=parseInt(nomalHistoB[inImage[2][i][k]]);
                }
                else{
                    outImage[0][i][k] = inImage[0][i][k];
                    outImage[1][i][k] = inImage[1][i][k];
                    outImage[2][i][k] = inImage[2][i][k];
                }
            }
        }
        displayImage();

    }
    function equalizeImage_mouse(){
        var mouseCheck= document.getElementById("mouseEnable");
            //사각형 선택이 체크가 안되었을때!
            if(!mouseEnable.checked){
                startX = startY=0;
                endX = inW;
                endY= inH;
                equalizeImage();
                return;
            }
            //사각형 체크됨.
            //마우스 이벤트 리스너 켜기
            onEventListener();
    }