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/

posted @ 2015-07-16 22:23 陳小凱閱讀(1243) 評論(0) 收藏舉報

刷新頁面返回頂部

GitHub 新浪微博聯系作者我的簡歷

HTML5將圖片轉化成字符畫