<!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. javascript callback函数的理解与使用

    最近做的一个项目中用到了callback函数,于是就研究了下总结下我对javascript callback的理解 首先从callback的字面翻译“回调” 可以理解这是一个函数被调用的机制 当我们遇 ...

  2. 细说:Unicode, UTF-8, UTF-16, UTF-32, UCS-2, UCS-4

    1. Unicode与ISO 10646 全世界很多个国家都在为自己的文字编码,并且互不想通,不同的语言字符编码值相同却代表不同的符号(例如:韩文编码EUC-KR中“한국어”的编码值正好是汉字编码GB ...

  3. svn版本库包含多个项目 ; git svn clone; 某一个子项目,有多个分支;

    情况描述: 公司的svn版本库,包含了多个项目,每个项目对应于1个文件夹 假设版本库名字为Main,其下的项目用 A项目,对应文件夹A B项目,对应文件夹B 通过git svn clone获取了svn ...

  4. Regex count lowercase letters

    Description: Your task is simply to count the total number of lowercase letters in a string. Example ...

  5. Entity Framework Architecture

    http://www.entityframeworktutorial.net/EntityFramework-Architecture.aspx The following figure shows ...

  6. springmvc+hibernate入门-揭开神秘的面纱

            Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块.使用 Spring 可插入的 MVC 架构,可以选择是使用内置的 Spring Web 框架还是 Struts 这 ...

  7. UVa 156 Ananagrams

    题意:给出一些单词,在这些单词里面找出不能通过字母重排得到的单词(判断的时候不用管大小写),然后按照字典序输出. 学习的紫书的map= = 将每一个单词标准化 先都转化为小写,再排序(即满足了题目中说 ...

  8. wince6下载地址

    http://geekswithblogs.net/WindowsEmbeddedCookbook/archive/2010/08/31/installing-windows-ce-6.0-tools ...

  9. css去掉a标签点击后的虚线框

    outline是css3的一个属性,用的很少. 声明,这是个不能兼容的css属性,在ie6.ie7.遨游浏览器都不兼容. outline控制的到底是什么呢? 当聚焦a标签的时候,在a标签的区域周围会有 ...

  10. (转)每天一个Linux命令(8): tar

    通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候tar命令就是是必不可少的一个功能强大的工具.linux中最流行的tar是麻雀虽小,五脏俱全,功能强大. tar命令可以为linux ...