Canvas几种图像滤镜的实现

创建时间：2017-04-03 投稿人：浏览次数：1386

图像滤镜实际上是把读取的图像数据加以修改，从而在保存图像原本信息基础上显示出不同的图像风格。

首先我们拿一个基本的24位图像作为源文件：

负片滤镜：

for(i = 0; i <= data.length - 4; i += 4){
            data[i] = 255 - data[i];
            data[i + 1] = 255 - data[i + 1];
            data[i + 2] = 255 - data[i + 2];
        }

黑白滤镜：

     for(i = 0; i <= data.length - 4; i += 4){
            average = (data[i] + data[i + 1] + data[i + 2]) / 3;
            data[i] = average;
            data[i + 1] = average;
            data[i + 2] = average;
        }

浮雕滤镜：

for(i = 0; i < length; i++){
            if(i <= length-width*4){
                if((i+1) % 4 !== 0){
                    if((i+4) % (width*4) == 0){
                        data[i] = data[i-4];
                        data[i+1] = data[i-3];
                        data[i+2] = data[i-2];
                        data[i+3] = data[i-1];
                        i+=4;
                    }
                    else{
                        data[i] = 255/2 + 2*data[i] -data[i+4] -data[i + width * 4];
                    }
                }
            }else{
                if((i+1) % 4 !== 0){
                    data[i] = data[i - width*4];
                }
            }
        }

墨镜滤镜：

 for(i = 0; i <= data.length; ++i){
            if((i+1)%4 != 0){
                if((i+4) % (width * 4) == 0){
                    data[i] = data[i-4];
                    data[i+1] = data[i-3];
                    data[i+2] = data[i-2];
                    data[i+1] = data[i-1];
                    i+=4;
                }
                else{
                    data[i] = 2*data[i] -1.5*data[i + 4];
                }
            }
        }

最后附上完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>我的练习</title>
    <script src="lab.js" charset="UTF-8"></script>
    <meta charset="utf-8">
</head>

<body>
<div>
    <input type="button" id="restoreButton" value="restore"/>
    <input type="button" id="negativeButton" value="Negative"/>
    <input type="button" id="noColorButton" value="noColor"/>
    <input type="button" id="embossingButton" value="embossing"/>
    <input type="button" id="sunGlassButton" value="sunGlass"/>
</div>
<canvas id="canvas" width="800" height="600">对不起你的浏览器不支持canvas</canvas>
</body>
</html>

window.onload = function(){
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    var image = new Image();
    negativeButton = document.getElementById("negativeButton");
    noColorButton = document.getElementById("noColorButton");
    restoreButton = document.getElementById("restoreButton");
    embossingButton = document.getElementById("embossingButton");
    sunGlassButton = document.getElementById("sunGlassButton");

    restoreButton.onclick = function(){
        context.drawImage(image, 0, 0, image.width, image.height, 0, 0, context.canvas.width, context.canvas.height);
    };

    noColorButton.onclick = function(){
        var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
        var data = imageData.data;
        var i;
        var average;

        for(i = 0; i <= data.length - 4; i += 4){
            average = (data[i] + data[i + 1] + data[i + 2]) / 3;
            data[i] = average;
            data[i + 1] = average;
            data[i + 2] = average;
        }
        context.putImageData(imageData, 0, 0);
    };

    negativeButton.onclick = function(){
        var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
        var data = imageData.data;
        var i;

        for(i = 0; i <= data.length - 4; i += 4){
            data[i] = 255 - data[i];
            data[i + 1] = 255 - data[i + 1];
            data[i + 2] = 255 - data[i + 2];
        }
        context.putImageData(imageData, 0, 0);
    };

    embossingButton.onclick = function(){
        var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
        var data = imageData.data;
        var width =imageData.width;
        var length = data.length;
        var i;

        for(i = 0; i < length; i++){
            if(i <= length-width*4){
                if((i+1) % 4 !== 0){
                    if((i+4) % (width*4) == 0){
                        data[i] = data[i-4];
                        data[i+1] = data[i-3];
                        data[i+2] = data[i-2];
                        data[i+3] = data[i-1];
                        i+=4;
                    }
                    else{
                        data[i] = 255/2 + 2*data[i] -data[i+4] -data[i + width * 4];
                    }
                }
            }else{
                if((i+1) % 4 !== 0){
                    data[i] = data[i - width*4];
                }
            }
        }

        context.putImageData(imageData, 0, 0);
    };

    sunGlassButton.onclick = function(){
        var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
        var data = imageData.data;
        var width = imageData.width;
        var i;

        for(i = 0; i <= data.length; ++i){
            if((i+1)%4 != 0){
                if((i+4) % (width * 4) == 0){
                    data[i] = data[i-4];
                    data[i+1] = data[i-3];
                    data[i+2] = data[i-2];
                    data[i+1] = data[i-1];
                    i+=4;
                }
                else{
                    data[i] = 2*data[i] -1.5*data[i + 4];
                }
            }
        }
        context.putImageData(imageData, 0, 0);
    };

    image.src = "determine.bmp";
    image.onload = function(){
        context.drawImage(image, 0, 0, image.width, image.height, 0, 0, context.canvas.width, context.canvas.height);
    }
};

声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。