HTML5将图片转化成字符画

　　字符画大家一定非常熟悉了，那么如何把一张现有的图片转成字符画呢？HTML5让这个可能变成了现实，通过canvas，可以很轻松实现这个功能。其实原理很简单：扫描图片相应位置的像素点，再计算出其灰度值，根据灰度值的大小，分别用字符#*+“和空格来填充。下面是源码：HTML：一个canvas元素#cv，一个字符画容器#txt 。

1 <canvas id="cv">fuck ie</canvas>
2 <div id="txt"></div>

css：由于每一行用p来填充，所以p的height和font-size大小应该一致都是12px，这样可以避免每行出现空隙。

1 * {margin: 0;padding: 0;}
2 body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
3 p { height: 12px;}
4 p.ts { margin: 10px 0 0 0; width: 500px; float: left;}
5 span {width: 12px;}
6 #cv, #txt {float: left;}
7 #cv { margin-right: 5px;}

javascript：请看注释和下面的解释。

 1 var cv = document.getElementById(‘cv‘);
 2 var c = cv.getContext(‘2d‘);
 3 var txtDiv = document.getElementById(‘txt‘);
 4 var fileBtn = document.getElementById("up-button");
 5 var img = new Image();
 6 img.src = ‘a.jpg‘;
 7 img.onload = init; // 图片加载完开始转换
 8 fileBtn.onchange = getImg;
 9 // 根据灰度生成相应字符
10 function toText(g) {
11     if (g <= 30) {
12         return ‘#‘;
13     } else if (g > 30 && g <= 60) {
14         return ‘&‘;
15     } else if (g > 60 && g <= 120) {
16         return ‘$‘;
17     }  else if (g > 120 && g <= 150) {
18         return ‘*‘;
19     } else if (g > 150 && g <= 180) {
20         return ‘o‘;
21     } else if (g > 180 && g <= 210) {
22         return ‘!‘;
23     } else if (g > 210 && g <= 240) {
24         return ‘;‘;
25     }  else {
26         return ‘&nbsp;‘;
27     }
28 }
29 // 根据rgb值计算灰度
30 function getGray(r, g, b) {
31     return 0.299 * r + 0.578 * g + 0.114 * b;
32 }
33 // 转换
34 function init() {
35     txtDiv.style.width = img.width + ‘px‘;
36     cv.width = img.width;
37     cv.height = img.height;
38     c.drawImage(img, 0, 0);
39     var imgData = c.getImageData(0, 0, img.width, img.height);
40     var imgDataArr = imgData.data;
41     var imgDataWidth = imgData.width;
42     var imgDataHeight = imgData.height;
43     var html = ‘‘;
44     for (h = 0; h < imgDataHeight; h += 12) {
45         var p = ‘<p>‘;
46         for (w = 0; w < imgDataWidth; w += 6) {
47             var index = (w + imgDataWidth * h) * 4;
48             var r = imgDataArr[index + 0];
49             var g = imgDataArr[index + 1];
50             var b = imgDataArr[index + 2];
51             var gray = getGray(r, g, b);
52             p += toText(gray);
53         }
54         p += ‘</p>‘;
55         html += p;
56     }
57     txtDiv.innerHTML = html;
58 }
59 // 获取图片
60 function getImg(file) {
61     var reader = new FileReader();
62     reader.readAsDataURL(fileBtn.files[0]);
63     reader.onload = function () {
64         img.src = reader.result;
65     }
66 }

如何取到相应像素点的灰度

　　getImageData方法返回一个对象，每个像素点的rgba值都保存在其data属性下面，这是一个一位数组，也就是说，rgba分别对应一个值，然后接着就是一下像素点的rgba，假设getImageData.data的值为[1,2,3,4,5,6,7,8]，那么getImageData对象范围就包含了2个像素点，第一个像素点的rgba值分别是1,2,3,4，第二个像素点的就是45,6,7,8。因此，我们在取每个像素点的rgba值的时候其index应该在像素点的索引值上乘以4，然后通过getGray()计算灰度。

如何对应到字符

　　再考虑一下每个字符串的宽度是6px，高度是12px，所以我们不可能每个像素点都要对应一个字符，那样生成的图案将非常之大。我们只能根据图片宽高，来定义一个间隔，横向间隔6px，纵向间隔12px取一次像素，这样可以保证生成的字符画大小和原图保持一致。

在线演示：http://www.cssha.com/img2txt/

时间： 2024-10-07 07:05:26

HTML5将图片转化成字符画