H5核心技術---canvas實現馬賽克

阿新 • • 發佈：2021-09-29

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <canvas id="canvas" width="" height=""></canvas>
    </body>
    
    <script type="text/javascript">
        window.onload  
= function() {
            var canvas = document.getElementById('canvas');
            if(canvas.getContext) {
              var ctx = canvas.getContext('2d');
              var img = new Image();
              img.src = '2.jpg';
              img.onload = function() {
                canvas.width = 
 img.width * 2;
                canvas.height = img.height;
                draw();
              }
              function draw() {
                //  把圖片寫入畫布
                ctx.drawImage(img,0,0,img.width,img.height);
                //  獲取老的圖片資料
                var oldImageData = ctx.getImageData(0,0,img.width,img.height);
                 
//  建立一個跟老圖片一樣大的空白圖片資料
                var newImageData = ctx.createImageData(img.width,img.height);
                //  設定一個馬賽克矩形的值
                var size = 5;
                //  生成n個馬賽克矩形開始
                for(var i=0;i<oldImageData.width/size;i++) {
                  for(var j=0;j<oldImageData.height/size;j++){
                    //  從馬賽克矩形中隨機抽出一個畫素點資訊
                    var color = getPxInfo(oldImageData,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(newImageData,i*size+a,j*size+b,color);
                      }
                    }
                    //  把當前馬賽克矩形中的所有畫素點統一成隨機選出的畫素點：結束
        
                  }
                }
                //  生成n個馬賽克矩形結束
        
                //  每次寫入新的imagedata，先清空畫布
                // ctx.clearRect(0,0,canvas.width,canvas.height);
                //把新的imagedata寫入畫布；
                ctx.putImageData(newImageData,canvas.width/2,0);
              }
            }
            //    獲取某個畫素點的函式
            function getPxInfo(imgdata,x,y){
                var color = [];
                var data = imgdata.data;
                var w = imgdata.width;
                var h = imgdata.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(imgdata,x,y,color){
                var data = imgdata.data;
                var w = imgdata.width;
                var h = imgdata.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>
</html>