摘要：字符畫大家一定非常熟悉了，那么如何把一張現有的圖片轉成字符畫呢讓這個可能變成了現實，通過，可以很輕松實現這個功能。我們只能根據圖片寬高，來定義一個間隔，橫向間隔，縱向間隔取一次像素，這樣可以保證生成的字符畫大小和原圖保持一致。

猛點 這里 看高清妹子圖。

字符畫大家一定非常熟悉了，那么如何把一張現有的圖片轉成字符畫呢？ HTML5 讓這個可能變成了現實，通過 canvas，可以很輕松實現這個功能。

其實原理很簡單：掃描圖片相應位置的像素點，再計算出其灰度值，根據灰度值的大小，分別用字符 #*+“ 和空格來填充。

下面是源碼：

HTML：一個 canvas 元素 #cv，一個字符畫容器 #txt。

fuck ie

css：由于每一行用 p 來填充，所以 p 的 height 和 font-size 大小應該一致都是 12px，這樣可以避免每行出現空隙。

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

javascript：請看注釋和下面的解釋。

var cv = document.getElementById("cv");
var c = cv.getContext("2d");
var txtDiv = document.getElementById("txt");
var fileBtn = document.getElementById("up-button");
var img = new Image();
img.src = "a.jpg";
img.onload = init; // 圖片加載完開始轉換
fileBtn.onchange = getImg;

// 根據灰度生成相應字符
function toText(g) {
    if (g <= 30) {
        return "#";
    } else if (g > 30 && g <= 60) {
        return "&";
    } else if (g > 60 && g <= 120) {
        return "$";
    }  else if (g > 120 && g <= 150) {
        return "*";
    } else if (g > 150 && g <= 180) {
        return "o";
    } else if (g > 180 && g <= 210) {
        return "!";
    } else if (g > 210 && g <= 240) {
        return ";";
    }  else {
        return " ";
    }
}


// 根據rgb值計算灰度
function getGray(r, g, b) {
    return 0.299 * r + 0.578 * g + 0.114 * b;
}

// 轉換
function init() {
    txtDiv.style.width = img.width + "px";
    cv.width = img.width;
    cv.height = img.height;
    c.drawImage(img, 0, 0);
    var imgData = c.getImageData(0, 0, img.width, img.height);
    var imgDataArr = imgData.data;
    var imgDataWidth = imgData.width;
    var imgDataHeight = imgData.height;
    var html = "";
    for (h = 0; h < imgDataHeight; h += 12) {
        var p = "
";
        for (w = 0; w < imgDataWidth; w += 6) {
            var index = (w + imgDataWidth * h) * 4;
            var r = imgDataArr[index + 0];
            var g = imgDataArr[index + 1];
            var b = imgDataArr[index + 2];
            var gray = getGray(r, g, b);
            p += toText(gray);
        }
        p += "
";
        html += p;
    }
    txtDiv.innerHTML = html;
}

// 獲取圖片
function getImg(file) {
    var reader = new FileReader();
    reader.readAsDataURL(fileBtn.files[0]);
    reader.onload = function () {
        img.src = reader.result;
    }
}

如何取到相應像素點的灰度？

getImageData 方法返回一個對象，每個像素點的 rgba 值都保存在其 data 屬性下面，這是一個一位數組， 也就是說，rgba 分別對應一個值，然后接著就是一下像素點的 rgba，假設 getImageData.data 的值為 [1,2,3,4,5,6,7,8]， 那么 getImageData 對象范圍就包含了 2 個像素點，第一個像素點的 rgba 值分別是 1,2,3,4，第二個像素點的就是 4,5,6,7,8。 因此，我們在取每個像素點的 rgba 值的時候其 index 應該在像素點的索引值上乘以 4，然后通過 getGray() 計算灰度。

如何對應到字符？

再考慮一下每個字符串的寬度是 6px，高度是 12px，所以我們不可能每個像素點都要對應一個字符，那樣生成的圖案將非常之大。 我們只能根據圖片寬高，來定義一個間隔，橫向間隔 6px，縱向間隔 12px 取一次像素，這樣可以保證生成的字符畫大小和原圖保持一致。

最后請看 demo： http://justjavac.com/img2txt/

原文鏈接： http://justjavac.com/javascript/2013/09/25/ji-yu-canvas-jiang-tu-pian-zhuan-hua-cheng-zi-fu-hua.html

最后附上幾張圖