<!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. java.lang.ClassNotFoundException

    在项目的properties中的Java Build Path里将Order and Export里的类库勾选上.

  2. HTML表格标签

    table标签的用途: 在表格中放图片,或用于布局(已经淘汰掉了),存放数据 table制作过程: 1.先分析表格有多少行 2.分析有多少列 3.做好表格的基本之后再添加表格需要的一些属性 table ...

  3. PHP几个几十个G大文件数据统计并且排序处理

    诸多大互联网公司的面试都会有这么个问题,有个4G的文件,如何用只有1G内存的机器去计算文件中出现次数最多的数字(假设1行是1个数组,例如QQ号 码).如果这个文件只有4B或者几十兆,那么最简单的办法就 ...

  4. python Tkinter接受键盘输入并保存文件

    最近想用python写个切换host的小工具,折腾了好几天,终于实现了第一步. 采用Tkinter编程,text控件接受输入,然后点击save按钮,保存内容到当前文件夹下,文件名为hostb,如下两张 ...

  5. 菜鸟学习笔记4——jquery事件

    方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发.或将函数绑定到指定元素的 blur 事件 change() 触发.或将函数绑定到指定元素的 change 事件 cli ...

  6. 物联网操作系统HelloX已成功移植到MinnowBoard MAX开发板上

    在HelloX开发团队的努力下,以及Winzent Tech公司(总部在瑞典斯德哥尔摩)的支持下,HelloX最新版本V1.78已成功移植到MinnowBoard MAX开发板上.相关源代码已经发布到 ...

  7. JVM——新生代与老年代

    首先看在JVM的堆中,按代的划分: Young:主要是用来存放新生的对象. Old:主要存放应用程序中生命周期长的内存对象. Permanent:是指内存的永久保存区域,主要存放Class和Meta的 ...

  8. Linux/Unix shell 监控Oracle告警日志(monitor alter log file)

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

  9. Android 轻量级ORM数据库开源框架ActiveAndroid 源码分析

    ActiveAndroid 项目地址在https://github.com/pardom/ActiveAndroid 关于他的详细介绍和使用步骤 可以看下面两篇文章: https://github.c ...

  10. 前台实现下载xml功能

    阅读目录 介绍问题 MIME TYPE 解决问题 介绍问题 平时我们通过href去链接文件时,一般情况是对于zip.jar等下载功能,而对于xml.css.html.js等都是查看功能. 现在下面的代 ...