<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload = function (){

    var oc = document.getElementById('c1');

    var ogc = oc.getContext('2d');

    var yimg = new Image();

    yimg.onload = function ()

    {

        draw(this);

    };

    yimg.src = 'img/5-5.jpg';

    function draw(obj)

    {

        oc.width = obj.width;

        oc.height = obj.height * 2;

        ogc.drawImage(obj,0,0);

        var oimg = ogc.getImageData(0,0,obj.width,obj.height);

        var w = oimg.width;

        var h = oimg.height;

        var num = 5;

        var newimg = ogc.createImageData(obj.width,obj.height);

        var stepw = w/num;

        var steph = h/num;

        for(var i = 0; i < steph; i++)

        {

            for(var j = 0; j < stepw; j++)

            {

                var color = getXY(oimg,j*num+Math.floor(Math.random()*num),i*num+Math.floor(Math.random()*num));

                for(var k = 0; k < num; k++)

                {

                    for(var l = 0; l < num; l++)

                    {

                        setXY(newimg,j*num+l,i*num+k,color);

                    }

                }

            }

        }

        ogc.putImageData(newimg,0,obj.height);

    }

    function getXY(obj,x,y)

    {

        var w = obj.width;

        var h = obj.height;

        var d = obj.data;

        var color = [];

        color[0] = d[ 4*(y*w+x)];

        color[1] = d[ 4*(y*w+x) +1];

        color[2] = d[ 4*(y*w+x) +2];

        color[3] = d[ 4*(y*w+x) +3];

        return color;

    }

    function setXY(obj,x,y,color)

    {

        var w = obj.width;

        var h = obj.height;

        var d = obj.data;

        d[ 4*(y*w+x)] = color[0];

        d[ 4*(y*w+x) +1] = color[1];

        d[ 4*(y*w+x) +2] = color[2];

        d[ 4*(y*w+x) +3] = color[3];

    }

}

</script>

<style>

body{

    background:pink;

    }

#c1{

    background:white;

    }

</style>

</head>

<body>

<canvas id="c1" width="400" height="400"></canvas>

</body>

</html>

html5 canvas图片马赛克的更多相关文章

  1. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  2. 导出HTML5 Canvas图片并上传服务器功能

    这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...

  3. HTML5 Canvas图片操作简单实例1

    1.加载显示图片 <canvas id="canvasOne" class="myCanvas" width="500" height ...

  4. HTML5 Canvas ( 图片绘制 转化为base64 ) drawImage,toDataURL

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. html5 canvas图片渐变

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. html5 canvas图片翻转

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. html5 canvas图片反色

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

随机推荐

  1. 《OD大数据实战》HBase环境搭建

    一.环境搭建 1. 下载 hbase-0.98.6-cdh5.3.6.tar.gz 2. 解压 tar -zxvf hbase-0.98.6-cdh5.3.6.tar.gz -C /opt/modul ...

  2. HibernateTools的使用

    1. 到 Hibernate.org官网上 下载最新版的 Hibernate Tools,我用的是 HibernateTools-3.2.4.GA版 2. 将 下载下来的压缩包解压缩,里面会有 plu ...

  3. dotnet il editor 调试 iis 程序

    没有C#源代码,IL级别调试.听说windbg也可以,不过windbg有些难.另外il其实一般写C#程序也不熟,不过我目的只是找出异常点,到客户一般不发pdb文件,出去也是release版本,出异常( ...

  4. HDU 1224 Free DIY Tour

    题意:给出每个城市interesting的值,和城市之间的飞行路线,求一条闭合路线(从原点出发又回到原点) 使得路线上的interesting的值之和最大 因为要输出路径,所以用pre数组来保存前驱 ...

  5. Sqlserver高级查询

    1.查询表结构 --查询表结构(字段名.字段类型.字段长度.能否为空) SELECT syscolumns.name,systypes.name, syscolumns.length ,syscolu ...

  6. Matlab中plot函数参数解析

    功能 二维曲线绘图 语法 plot(Y) plot(X1,Y1,...) plot(X1,Y1,LineSpec,...) plot(...,'PropertyName',PropertyValue, ...

  7. 关于ios越狱开发的那些事

    也许吧,每每接触某些新东西的时候,都有点犯晕吧,这不是应该要的. 第一次接触ios越狱开发,也是这样吧.这篇主要是从无到有的说一下ios越狱的开发,网上很多的教程大部门都比较旧了吧,放在新设备上总是出 ...

  8. 机器学习（二）——K-均值聚类（K-means）算法

    最近在看<机器学习实战>这本书,因为自己本身很想深入的了解机器学习算法,加之想学python,就在朋友的推荐之下选择了这本书进行学习,在写这篇文章之前对FCM有过一定的了解,所以对K均值算 ...

  9. 【转】为eclipse安装python、shell开发环境和SVN插件

    原文网址:http://www.crazyant.net/1185.html eclipse是一个非常好用的IDE,通常来说我们都用eclipse来开发JAVA程序,为了让开发python.shell ...

  10. Linux/Unix shell 监控Oracle监听器(monitor listener)

    使用shell脚本实现对Oracle数据库的监控与管理将大大简化DBA的工作负担,如常见的对实例的监控,监听的监控,告警日志的监控,以及数据库的备份,AWR report的自动邮件等.本文给出Linu ...