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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
Oct 09 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
用Python输出一个杨辉三角的例子
2014/06/13 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python json格式化打印实现过程解析
2020/07/21 Python
python开根号实例讲解
2020/08/30 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
电子商务应届生自我鉴定
2014/01/13 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技