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


Posted in Javascript onApril 13, 2019

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3water.com 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程序设计有所帮助。

Javascript 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
Javascript 面向对象之重载
May 04 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
微信小程序template模版的使用方法
Apr 13 #Javascript
vue基于viewer实现的图片查看器功能
Apr 12 #Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 #Javascript
详解js创建对象的几种方法及继承
Apr 12 #Javascript
详解JQuery基础动画操作
Apr 12 #jQuery
You might like
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JS判断数组那点事
2017/10/10 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
详解Python多线程下的list
2020/07/03 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
过滤器的用法
2013/10/08 面试题
民族团结先进个人材料
2014/02/05 职场文书
《姥姥的剪纸》教学反思
2014/02/25 职场文书
综治宣传月活动总结
2014/04/28 职场文书
文化产业实施方案
2014/06/07 职场文书
政府法律服务方案
2014/06/14 职场文书
目标责任书格式范文
2015/05/11 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
解析目标检测之IoU
2021/06/26 Python
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript