Canvas 이미지 처리: 색상 반전, 흑백, 밝기, 빈티지 마스크, 투명



    
        
        
        <script type="text/javascript">
            function $$(id){
                return document.getElementById(id);
            }
            window.onload = function (){
                    var ctx = $$("cvs").getContext("2d");
                    var image = new Image();
                    image.src = "princess.png";
                    ctx.globalAlpha = 1; //  
                    image.onload = function(){
                        ctx.drawImage(image, 10, 10);
                        var imgData = ctx.getImageData(10, 10, 120, 120);
                        var data = imgData.data;
                        /* */
                        for(var i=0; i<data.length; i+=4){
                            data[i+0] = 255-data[i+0];
                            data[i+1] = 255-data[i+0];
                            data[i+2] = 255-data[i+0];
                        }
                        
                        /* ( )*/
                        for(var i=0; i<data.length; i+=4){
                            /* 
                            var average = (data[i+0]*0.3+data[i+1]*0.6+data[i+2]*0.1)/3;
                            */
                            var average = (data[i+0]+data[i+1]+data[i+2])/3;
                            data[i+0] = average;
                            data[i+1] = average;
                            data[i+2] = average;
                        }
                        
                        /* */
                        for(var i=0; i<data.length; i+=4){
                            var x = 20;
                            data[i+0] += x;
                            data[i+1] += x;
                            data[i+2] += x;
                        }
                        /* */
                        for(var i=0; i<data.length; i+=4){
                            var r = data[i+0];
                            var g = data[i+1];
                            var b = data[i+2];
                            data[i+0] = r*0.39 + g*0.76 + b*0.18;
                            data[i+1] = r*0.35 + g*0.68 + b*0.16;
                            data[i+2] = r*0.27 + g*0.53 + b*0.13;
                        }
                        
                        /* */
                        for(var i=0; i<data.length; i+=4){
                            var r = data[i+0];
                            var g = data[i+1];
                            var b = data[i+2];
                            var average = (r+g+b)/3;
                            data[i+0] = average;
                            data[i+1] = 0;
                            data[i+2] = 0;
                        }
                        
                        /* */
                        for(var i=0; i<data.length; i+=4){
                            data[i+3] = data[i+3]*0.5;
                        }
                        
                        ctx.putImageData(imgData, 140, 10);
                    }
            }
        </script>
    
    
        <canvas id="cvs" width="300px" height="300px" style="border:1px dashed skyblue;"/>
    

</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

프런트엔드 데이터 처리 방법

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Canvas 이미지 처리: 색상 반전, 흑백, 밝기, 빈티지 마스크, 투명

좋은 웹페이지 즐겨찾기