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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
May 30 Javascript
用JS写一个发布订阅模式
Nov 07 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
分享PHP header函数使用教程
2013/09/05 PHP
Zend studio文件注释模板设置方法
2013/09/29 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
nodejs实现用户登录路由功能
2019/05/22 NodeJs
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中的字符串查找操作方法总结
2016/06/27 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
python win32 简单操作方法
2017/05/25 Python
对Python中plt的画图函数详解
2018/11/07 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
python要安装在哪个盘
2020/06/15 Python
环境工程大学生个人的自我评价
2013/10/08 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
迟到检讨书500字
2014/02/05 职场文书
抄作业检讨书
2014/02/17 职场文书
夏季药店促销方案
2014/08/22 职场文书
学校周年庆活动方案
2014/08/22 职场文书
就业协议书范本
2014/10/08 职场文书
环卫处个人工作总结
2015/03/04 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
GPU服务器的多用户配置方法
2022/07/07 Servers