练习像素级处理

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>像素级处理</title>
</head>
<body>
<canvas id="canvasa" width="400" height="400" style="border:1px solid #666;margin-right:50px">
    当前浏览器不支持canvas，请更换浏览器后再试。
</canvas>
<canvas id="canvasb" width="400" height="400" style="border:1px solid #666;">当前浏览器不支持canvas，请更换浏览器后再试。</canvas>
<div style="text-align: center;">
    <a href="javascript:greyEffect();">Grey Effect</a>
    <a href="javascript:blackEffect();">Black&White Effect</a>
    <a href="javascript:reverseEffect();">reverse Effect</a>
    <a href="javascript:blurEffect();">blur Effect</a>
</div>
<script>
    var canvasa = document.getElementById('canvasa');
    var contexta = canvasa.getContext('2d');

    var canvasb = document.getElementById('canvasb')
    var contextb = canvasb.getContext('2d')

    var img = new Image();
    window.onload = function(){

        img.src = 'fanfan.jpg';
        img.onload = function(){
            contexta.drawImage(img, 0, 0, canvasa.width, canvasa.height);
        }
    }

    function greyEffect(){//灰度滤镜
        var imgData = contexta.getImageData(0, 0, canvasa.width, canvasa.height);//获取canvasa的像素信息
        var pixelData = imgData.data;//imgData保存信息有三个，分别是width，height，data（data由四个参数组成分别是rgba）

        for(var i = 0; i <= canvasa.width * canvasa.height; i++){
            var r = pixelData[i*4 + 0];
            var g = pixelData[i*4 + 1];
            var b = pixelData[i*4 + 2];

            var grey = r*0.3 + g*0.59 + b*0.11;//计算灰度值

            pixelData[i*4 + 0] = grey;
            pixelData[i*4 + 1] = grey;
            pixelData[i*4 + 2] = grey;
        }

        contextb.putImageData(imgData, 0, 0, 0, 0, canvasb.width, canvasb.height);//把信息修改后的imgData，绘制到canvasb中
    }

    function blackEffect(){//黑白滤镜
        var imgData = contexta.getImageData(0, 0, canvasa.width, canvasa.height);
        var pixelData = imgData.data;

        for(var i = 0; i <= canvasa.width * canvasa.height; i++){
            var r = pixelData[i*4 + 0];
            var g = pixelData[i*4 + 1];
            var b = pixelData[i*4 + 2];

            var grey = r*0.3 + g*0.59 + b*0.11;//计算灰度值

            if(grey > 255/2){
                v = 255
            }else{
                v = 0
            }

            pixelData[i*4 + 0] = v;
            pixelData[i*4 + 1] = v;
            pixelData[i*4 + 2] = v;
        }

        contextb.putImageData(imgData, 0, 0, 0, 0, canvasb.width, canvasb.height);
    }

    function reverseEffect(){//反色滤镜
        var imgData = contexta.getImageData(0, 0, canvasa.width, canvasa.height);
        var pixelData = imgData.data;

        for(var i = 0; i <= canvasa.width * canvasa.height; i++){
            var r = pixelData[i*4 + 0];
            var g = pixelData[i*4 + 1];
            var b = pixelData[i*4 + 2];

            pixelData[i*4 + 0] = 255 - r;
            pixelData[i*4 + 1] = 255 - g;
            pixelData[i*4 + 2] = 255 - b;
        }

        contextb.putImageData(imgData, 0, 0, 0, 0, canvasb.width, canvasb.height);
    }

    function blurEffect(){//模糊滤镜
        var tmpImgData = contexta.getImageData(0, 0, canvasa.width, canvasa.height);
        var tmpPixelData = tmpImgData.data;

        var imgData = contexta.getImageData(0, 0, canvasa.width, canvasa.height);
        var pixelData = imgData.data;

        var blurR = 2;//设定模糊半径
        var totalnum = (2*blurR + 1)*(2*blurR + 1);
        for(var i = blurR; i < canvasb.height - blurR; i++){
            for(var j = blurR; j < canvasb.width - blurR; j++){

                var totalr = 0,totalg = 0,totalb = 0;
                for(var dx = -blurR; dx <= blurR; dx++){
                    for(var dy = -blurR; dy <= blurR; dy++){
                        var cx = i + dx;
                        var cy = j + dy;

                        var tmp = cx*canvasb.width + cy;
                        totalr += tmpPixelData[tmp*4 + 0];
                        totalg += tmpPixelData[tmp*4 + 1];
                        totalb += tmpPixelData[tmp*4 + 2];
                    }
                }

                var b = i*canvasb.width + j;
                pixelData[b*4 + 0] = totalr / totalnum;
                pixelData[b*4 + 1] = totalg / totalnum;
                pixelData[b*4 + 2] = totalb / totalnum;

            }
        }
        contextb.putImageData(imgData, 0, 0, 0, 0, canvasb.width, canvasb.height);
    }
</script>
</body>
</html>
posted @ 2017-11-04 00:05 corn林阅读(123) 评论(0) 收藏举报
刷新页面返回顶部
corn林

练习像素级处理

公告
