<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
            overflow: hidden;
            background: #616161;
        }
        #test{
            position: absolute;
            left:50%;
            top:50%;
            transform: translate3d(-50%,-50%,0);
            background: white;
            margin:auto;
        }
    </style>
</head>
<body>
<canvas id="test">
    <span>您的浏览器不支持canvas操作！！</span>
</canvas>
</body>
</html>
<script>
    var canvas=document.querySelector("#test");
    if(canvas.getContext) {
        var ctx = canvas.getContext(\'2d\');
        var img=new Image();
        img.src=\'img/2.jpg\';
        img.onload=function () {
            canvas.width=img.width;
            canvas.height=img.height;
            draw();
        };
        function draw() {
            ctx.drawImage(img,0,0);
            //获取数据：图片的长度，图片的宽度
            var oldImgData=ctx.getImageData(0,0,img.width,img.height);
            var newImgData=ctx.createImageData(img.width,img.height);

            //马赛克
            /*步骤：
                1. 选取一个马赛克矩形
                2. 从马赛克矩形中随机抽出一个像素点的信息(rgba)
                3. 将整个马赛克矩形中的像素点信息统一调成随机抽出的那个
            */
            //改变size值会使图形由清晰变得模糊
            var size=10;
            for(var i=0;i<oldImgData.width/size;i++){
                for(var j=0;j<oldImgData.width/size;j++){
                    //(i,j)为每一个马赛克矩形的坐标：(0,0)：代表(0,0)--(4,4)
                    //                              (0,1)：代表(0,5)--(4,9)
                    //                              (1,0)：代表(5,0)--(9,4)
                    //随机拿到马赛克矩形，Math.random( )为[0,1),Math.random()*size为[0,5)，Math.floor()向下取整。
                    //为第一个马赛克矩形设计getPxInfo(oldImgData,Math.floor(Math.random()*size),Math.floor(Math.random()*size));
//为所有马赛克矩形设计getPxInfo(oldImgData,i*size+Math.floor(Math.random()*size),j*size+Math.floor(Math.random()*size));
                    /*(0,1)：[0,4],[5,9] 交叉形成(0,5)--(4,9)
                    (1,0)：[5,9],[0,4] 交叉形成(5,0)--(9,4)
                    */
                    var color=getPxInfo(oldImgData,i*size+Math.floor(Math.random()*size),j*size+Math.floor(Math.random()*size));

                    for(var a=0;a<size;a++){
                        for(var b=0;b<size;b++){
                            setPxInfo(newImgData,i*size+a,j*size+b,color);
                        }
                    }
                }
            }
            //每次都清除上一个马赛克图形-----ctx:画布上的图；canvas：画布
            ctx.clearRect(0,0,ctx.width,ctx.height);
            // ctx.putImageData(newImgData,img.width,0);模糊与原图
            ctx.putImageData(newImgData,0,0);
            function getPxInfo(myData,x,y) {
                var color=[];
                var data=myData.data;
                var w=myData.width;
                var h=myData.height;
                color[0]=data[(y*w+x)*4];
                color[1]=data[(y*w+x)*4+1];
                color[2]=data[(y*w+x)*4+2];
                color[3]=data[(y*w+x)*4+3];
                return color;
            }
            function setPxInfo(myData,x,y,color) {
                var data=myData.data;
                var w=myData.width;
                var h=myData.height;
                data[(y*w+x)*4]= color[0];
                data[(y*w+x)*4+1]=color[1];
                data[(y*w+x)*4+2]= color[2];
                data[(y*w+x)*4+3]=color[3];
            }
        }
    }
</script>

版权声明：本文为huaweimian原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/huaweimian/p/13529258.html