<!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. PHP 日期格式：yyyy-MM-dd'T'HH:mm:ss.SSSZ 的写法

    今日在写一个接口是,其中有一个时间参数的格式是 yyyy-MM-dd'T'HH:mm:ss.SSSZ 查了一下最后的SSSZ SSS毫秒 Z代表时区 'T' 就是固定字符T,也有的指的是任意字符,本接 ...

  2. cygwin的rebaseall失败

    rebaseall: only ash or dash processes are allowed during rebasing Exit all Cygwin processes and stop ...

  3. 总结Selenium自动化测试方法（一）自动化测试基础

    总结Selenium自动化测试方法 一.自动化测试基础 1.什么样的项目适合自动化测试 ①任务测试明确,不会频繁变动 ②每日构建后的测试验证 ③比较频繁的回归测试 ④软件系统界面稳定.变动少 ⑤需要在 ...

  4. mongodb unset/set 删除/增加字段

    删除全部文档的name字段 db.users.update({},{$unset: {"name":""}},{nulti:true}) 增加全部文档的name ...

  5. hibernate的save()和persit()之间的区别

    这个问题啊,我在传智的Hibernate 视频上有小段讲解,save() 和persist() 都是持久化的保存,这两个方法在已经开启事物的情况下没多大区别:在不开启事物的时候save()方法会把数据 ...

  6. CSS 滤镜（IE浏览器专属其他浏览器不支持）

    Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...

  7. 51nod1274 最长递增路径

    将边排序后dp一下就可以了. #include<cstdio> #include<cstring> #include<cctype> #include<alg ...

  8. 定时任务处理-Quartz

    Quartz Scheduler,定时任务 Quartz是一个作业调度系统(a job scheduling system),负责在约定的时间到达时执行(或通知)其他软件控制.是一个Java的定时任务 ...

  9. type tips

    网上有这么一篇文章,全文如下:http://bbs.9ria.com/blog-220191-18429.html AS3中一共有以下六种获取变量类型的方法:   typeof  instanceof ...

  10. redis 在centos下的安装部署

    安装的redis版本是 redis-3.0.2 请严格按照以下步骤进行 可以免除以下错误 1 make[2]: cc: Command not found 异常原因:没有安装gcc 解决方案:yum ...