我要忍不住缔造万恶的马赛克啦...

在一些交互性的网页或者是别的地方可能会用到马赛克什么的, 但是本身却不想将这张图片破坏掉,此时马赛克就是非常好的实现方式。

马赛克的实现其实和我之前的一篇文章:《canvas实现图片颜色翻转》差不多,也是通过canvas的像素点进行操作的。

唯一的区别就是马赛克实际上是将一部分的像素进行处理,这就涉及到了一个模糊度的问题,不同像素点的处理效果是不一样的,马赛克的位置大小也会有区别。

javascript代码如下:

window.onload=function(){
    var oc=document.getElementById('c1');
    var ogc=oc.getContext('2d');

    var yImg=new Image();
    yImg.onload=function(){
        draw(yImg);
    };
    yImg.src='2.jpg';

    function draw(obj){
        oc.width=obj.width;
        ogc.drawImage(obj,0,0);

        var oImg=ogc.getImageData(0,0,obj.width,obj.height);

        var num=10;
        var stepW=oImg.width/num;
        var stepH=oImg.height/num;

        for(var i=0;i<stepW;i++){
            for(var j=0;j<stepH;j++){
                var result=[];
                //获取这一行的像素值
               var color=getXY(oImg,i*num+Math.floor(Math.random()*num),j*num+Math.floor(Math.random()*num));
                for(var k=0;k<num;k++){
                    for(var l=0;l<num;l++){
                        setXY(oImg,i*10+l,j*10+k,color);
                    }
                }
            }
        }
        ogc.putImageData(oImg,0,obj.height);

    }
    function getXY(obj,x,y){
        var w=obj.width;
        var h=obj.height;
        var d=obj.data;
        var color=[];

        color[0]=d[(y*w+x)*4];
        color[1]=d[(y*w+x)*4+1];
        color[2]=d[(y*w+x)*4+2];
        color[3]=d[(y*w+x)*4+3];
        return color;
    }
    function setXY(obj,x,y,color){
        var w=obj.width;
        var h=obj.height;
        var d=obj.data;
        d[(y*w+x)*4]=color[0];
        d[(y*w+x)*4+1]=color[1];
        d[(y*w+x)*4+2]=color[2];
        d[(y*w+x)*4+3]=color[3];
    }
};

其实可以发现,getXY和setXY和之前的文章中处理像素点都是一样的操作,只不过不同的地方有两个,一个是在循环之前我获取了一个num,而这个num就是决定模糊的

马赛克其实也可以理解成将图片像素点的排列顺序打乱。

效果:

postbird

代码:我在码云存了一份完整代码示例:

https://git.oschina.net/postbird/codes/gx56ijzso2hty9pa7uemf46