欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS实现马赛克图片效果完整示例

程序员文章站 2022-03-23 12:57:31
本文实例讲述了js实现马赛克图片效果。分享给大家供大家参考,具体如下: 整体逻辑:获取oldimg图片的像素信息,以5*5为单位,在5*5单位中取到一个随机像素并赋值给5...

本文实例讲述了js实现马赛克图片效果。分享给大家供大家参考,具体如下:

整体逻辑:获取oldimg图片的像素信息,以5*5为单位,在5*5单位中取到一个随机像素并赋值给5*5中的所有像素点,加以循环,以实现马赛克效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>www.jb51.net js图片马赛克</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: grey;
        text-align: center;
      }
      #mycanvas {
        background-color: rgba(250, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <canvas id="mycanvas" width="500" height="400"></canvas>
  </body>
  <script type="text/javascript">
    window.onload = function() {
      var mycanvas = document.getelementbyid('mycanvas');
      var painting = mycanvas.getcontext('2d');
       //生成一个图片节点
      var imgnode = new image();
      imgnode.src = '1.jpg';
      //调用函数
      drawimg(imgnode);
      function drawimg(imgnode) {
        //图片加载后执行马赛克实现语句:5个一组取到随机像素赋给新图里的五个一组
        imgnode.onload = function() {
          painting.drawimage(imgnode, 0, 0, 250, 400);
          var size = 5;
          //获取老图所有像素点
          var oldimg = painting.getimagedata(0, 0, 250, 400)
          //创建新图像素对象
          var newimg = painting.createimagedata(250, 400)
          for(var i = 0; i < oldimg.width; i++) {
            for(var j = 0; j < oldimg.height; j++) {
              //从5*5中获取单个像素信息
              var color = getpxinfo(oldimg, math.floor(i * size + math.random() * size), math.floor(j * size + math.random() * size))
              //写入单个像素信息
              for(var a = 0; a < size; a++) {
                for(var b = 0; b < size; b++) {
                  //              (a,b)
                  setpxinfo(newimg, i * size + a, j * size + b, color);
                }
              }
            }
          }
          painting.putimagedata(newimg, 250, 0)
        }
      }
      //读取单个像素信息
      function getpxinfo(imgdate, x, y) {
        var colorarr = [];
        var width = imgdate.width;
        colorarr[0] = imgdate.data[(width * y + x) * 4 + 0]
        colorarr[1] = imgdate.data[(width * y + x) * 4 + 1]
        colorarr[2] = imgdate.data[(width * y + x) * 4 + 2]
        colorarr[3] = imgdate.data[(width * y + x) * 4 + 3]
        return colorarr;
      }
      //写入单个像素信息
      function setpxinfo(imgdate, x, y, colors) {
        //(x,y) 之前有多少个像素点 == width*y + x
        var width = imgdate.width;
        imgdate.data[(width * y + x) * 4 + 0] = colors[0];
        imgdate.data[(width * y + x) * 4 + 1] = colors[1];
        imgdate.data[(width * y + x) * 4 + 2] = colors[2];
        imgdate.data[(width * y + x) * 4 + 3] = colors[3];
      }
    }
  </script>
</html>

更多关于javascript相关内容还可查看本站专题:《javascript+html5特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。