canvas之马赛克

用canvas的像素操作做了一个简单的马赛克效果。主要是利用的canvas中的一些有关像素的函数，思路很简单，就是将马赛克盒子中的所有像素都设置成相同的，设置的数据可以从马赛克盒子范围内随机选取一个单像素的数据。因为canvas中没有直接操作单像素的函数，所以要自己定义。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
           }
           html,body{
               height: 100%;
               overflow: hidden;
           }
           #mosaic{
               position: absolute;
               left: 0;
               top: 0;
               right: 0;
               bottom: 0;
               margin: auto;
               background: gray;
           }
       </style>
   </head>
   <body>
       <canvas id="mosaic">
           <span>画布无法正常显示</span>
       </canvas>
   </body>
   <script type="text/javascript">
       window.onload = function(){
           var mosaic = document.querySelector("#mosaic")
           if(mosaic.getContext){
               var msk = mosaic.getContext("2d")

               var img = new Image()
               img.src = "msk.jpg"
               img.onload = function(){
                   mosaic.width = 2*img.width
                   mosaic.height = img.height
                   draw(this)
               }
               function draw(img){
                   msk.drawImage(img,0,0,img.width,img.height)


                   var oldImgdata = msk.getImageData(0,0,img.width,img.height)
                   var newImgdata = msk.createImageData(img.width,img.height)

                   //mosaic
                   /*
                   *1、选区一个马赛克矩形
                   *2、从马赛克矩形中随机抽出一个像素点的信息(rgba)
                   *3、将整个马赛克矩形中的像素点信息统一调成随机抽出的那个
                   */
                   var size = 4
                   for(var i=0;i<oldImgdata.width/size;i++){
                       for (var j=0;j<oldImgdata.height/size;j++) {
                           //(i,j) => 每一个马赛克矩形的坐标
                           //(0,0) => (0,0)-(4,4)
                           //(0,1) => (0,5)-(4,9)
                           //(1,0) => (5,0)-(9,4)
                           //(1,1) => (5,5)-(9,9)

                           //Math.random()返回的是[0,1)之间的随机数
                           //Math.floor()向下取整
                           var color = getPxInfo(oldImgdata,size*i+Math.floor(Math.random()*size),size*j+Math.floor(Math.random()*size))

                           for (var k=0;k<size;k++) {
                               for (var l = 0; l < size; l++) {
                                   setPxInfo(newImgdata,size*i+k,size*j+l,color)
                               }
                           }
                       }
                   }


                   msk.putImageData(newImgdata,img.width,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>

效果图如下，左边是原图，右边是马赛克之后的图片：

马赛克效果

猜你喜欢