使用HTML5 Canvas实现马赛克拼图

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

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

使用HTML5 Canvas实现马赛克拼图_第1张图片

  使用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>

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

  1. Javascript的代码是分块处理的,如果在一个块内对某个变量进行多次赋值操作,则该区块内的该变量在运行时都为最终值。因此,必须将加载小头像的代码单独放在一个函数内;否则,加载的小头像都是同一个头像。
  2. 图片增加了Canvas操作的复杂度:必须等到图片完全加载后才能对其进行操作。浏览器通常会在页面脚本执行的同时异步加载图片。如果试图在图片未完全加载之前就将其呈现到Canvas上,那么Canvas将不会显示任何图片。因此,必须使用回调函数来确保图片在呈现之前已经加载完毕。
  3. 在本机测试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实现马赛克拼图)