<!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. JS里面匿名函数的调用 & 变量作用域的实验

    参考 http://www.educity.cn/wenda/54753.html 已实验验证结果正确. 1.下列哪些正确?(B.C) A.function(){ alert("Here!& ...

  2. C# Access DBHelp

    /* * By :落落 * URL: Www.MyLuoLuo.Com */ using System; using System.Collections.Generic; using System. ...

  3. JAVA使用DES加密算法加密解密

    程序中使用了.properties文件作为参数配置文档,好处是灵活配置各项参数 一旦对数据库的一些参数进行了配置,势必涉及数据库的IP,端口,用户名和密码 properties文件全是unicode编 ...

  4. 单点登录系统构建之二——SSO原理及CAS架构

    基本概念 SSO(Single Sign On)单点登录,是在多个应用系统中,用户只需要登录一次就能访问所有相互信任的应用系统.它包括将这次的主要登录映射到其他应用中用户同一个用户的登录机制. SSO ...

  5. WebForm页面生命周期及asp.net运行机制

    1.先上几张原理图着重理解: 现在针对第四副图原理进行解析: 流程: 1.浏览器发送请求 2.服务器软件(IIS)接收,它最终的目的就是为了向客户输出它请求的动态页面生成的html代码. 3.服务器不 ...

  6. 给新centos系统虚拟机配置网络服务

    记录下今天新建虚拟机的过程吧. 镜像:CentOS-6.3-x86_64-minimal; 虚拟机版本: vm 8.0 LET'S----------------------->GO 手动新建一 ...

  7. ORACLE 修改日志大小及增加日志成员

    日志文件能不能resize,直接扩大日志文件的大小?10g是不能的. 网上的一般方法就是新建两个临时日志组(oracle至少要求两个日志组),切换到这两个临时日志组后,删掉重建扩大或缩小,再添加日志组 ...

  8. 【UVa-514】铁轨——栈的学习

    UVa514 Rails(铁轨) 题目:铁轨 题目链接: UVa514链接 题目描述: 某城市有一个火车站,有n节车厢从A方向驶入车站,按进站的顺序编号为1-n.你的任务是判断是否能让它们按照某种特定 ...

  9. Xcode各版本官方下载及百度云盘下载, Mac和IOS及Xcode版本历史.

    官方下载, 用开发者账户登录,建议用Safari浏览器下载. 官方下载地址: https://developer.apple.com/xcode/downloads/ 百度云盘下载地址: http:/ ...

  10. vim的保存误认为utf8问题

     用vim改脚本改到一处写到'太原':w一下,再打开,,结果给乱码了...我默认sql是用cp936的,,,想到到和记录本的联通问题一样....   可能会问我为什么不用utf8,,,,因为ms200 ...