使用HTML5 Canvas实现马赛克拼图

使用HTML5 Canvas绘图来实现马赛克拼图，即由上千张小的方形图拼成一张人脸的大图。

下图显示了由上千张头像拼成的章子怡的脸：

　　使用Canvas创建了两个重叠的图层：底层用来显示小的方形图，上层用来显示大的人脸图。通过改变上层人脸图的透明度，就能实现如上图所示的马赛克拼图效果。

　　具体的实现代码如下：

 1 <!DOCTYPE html> 2 <html> 3   <head> 4           <title>图像马赛克</title> 5         <style type="text/css"> 6             #small { 7                 position:absolute; 8                 left: 10px; 9                 top: 10px;10             }11             #big {12                 position:absolute;13                 left: 10px;14                 top: 10px;15             }16         </style>17   </head>18   <body>19   <canvas id="small" style="border: 1px solid;"  width="800" height="600"> </canvas>20   <canvas id="big" style="border: 1px solid;"  width="800" height="600"> </canvas>21   <script>22           var canvas = document.getElementById('small');23           var smallcontext = canvas.getContext('2d');24           var photo = Array(1200);25       26         for(var i = 0; i < 1200; i ++) {27              drawPhoto(i);28         }                    29         30         //绘制小图  31         function drawPhoto(i) {32             photo[i] = new Image();33               photo[i].src = "photo/p (" + (i % 652) + ").jpg";34               photo[i].onload = function() {35                 //JavaScript没有整除运算，需要理由取余运算进行转换            36                 smallcontext.drawImage(photo[i], (i % 40) * 20, ((i - (i % 40)) / 40) * 20, 20, 20);37               }38         }39         40         //绘制大图41         var canvas = document.getElementById('big');42           var bigcontext = canvas.getContext('2d');43         bigpic = new Image();44         bigpic.src = "b.jpg";45         bigpic.onload = function() {46             bigcontext.drawImage(bigpic, 0, 0, 800, 600);47             changeAlpha(bigcontext);48         }49         50         //改变大图的透明度51         function changeAlpha(context) {52             //获得像素数据53             var imgd = context.getImageData(0, 0, 800,600);54             var pix = imgd.data;55             for(var i = 0, n = pix.length; i < n; i += 4) {56                 //每个像素由四个图像数据组成，分别表示红色，绿色，蓝色和透明度57                 //取值范围都是从0到255的数字58                 pix[i+3] = 190;59             }60             //保存像素数据61             context.putImageData(imgd, 0, 0);62         }63   </script>64   </body>65 </html>

　　在实现过程中，一共遇到三个问题。

Javascript的代码是分块处理的，如果在一个块内对某个变量进行多次赋值操作，则该区块内的该变量在运行时都为最终值。因此，必须将加载小头像的代码单独放在一个函数内；否则，加载的小头像都是同一个头像。
图片增加了Canvas操作的复杂度：必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到Canvas上，那么Canvas将不会显示任何图片。因此，必须使用回调函数来确保图片在呈现之前已经加载完毕。
在本机测试HTML5 Canvas程序的时候，如果用context.drawImage()后再用context.getImageData()获取图片像素数据的时候会抛出错误：SECURITY_ERR:DOM Exception 18。这是Javascript同源策略（Same origin policy）造成的。目前此问题在Firefox和Chrome中都存在。

　　　　解决方法如下：

　　　　Firefox：在地址栏输入about:config，然后设置security.fileuri.strict_origin_policy为false。

　　　　Chrome：在命令行中运行 /path-to-chrome/chrome.exe –allow-file-access-from-files。

转载于:https://www.cnblogs.com/alex-cheng/archive/2011/09/22/2185447.html

使用HTML5 Canvas实现马赛克拼图相关推荐

HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件简要教程这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
HTML5 Canvas图片马赛克模糊动画
经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用HTML5 Canvas技术来实现图片的马赛克模糊效果.在演示中我们可以拖动滑竿来设置马赛克模糊的程度,你可以在不同的值下观察图片 ...
html5 即时生成图片,HTML5 canvas生成图片马赛克特效插件
这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个js插件来制作了一个完整的图片马赛克应用框架:The Pi ...
html5 生成图片插件,HTML5 canvas生成图片马赛克特效插件
简要教程这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个js插件来制作了一个完整的图片马赛克应用框架:T ...
canvas 实现图片局部模糊_HTML5 Canvas图片马赛克模糊动画
本文作者html5tricks,转载请注明出处经常可以在网上或者电视上看到被马赛克模糊的图片或者视频,今天我们要利用 HTML代码如下 Change pixel resolution 32 定义了一 ...
canvas动画科技园_8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
html5拖拽实现拼图,HTML5技术之图像处理：一个滑动的拼图游戏
HTML5有许多功能特性可以把多媒体整合到网页中.使用canvas元素可以在这个空白的画板上填充线条,载入图片文件,甚至动画效果. 在这篇文章中,我将做一个滑动拼图的游戏用来展示HTML5 canva ...

使用HTML5 Canvas实现马赛克拼图

使用HTML5 Canvas实现马赛克拼图相关推荐

最新文章

热门文章