基於 canvas 將圖片轉化成字元畫

 和空格來填充。

 元素 ，一個字元畫容器 。

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

* {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;}

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 = '<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 += '</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;    }}

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

 方法返回一個對象，每個像素點的  值都儲存在其  屬性下面，這是一個一位元組， 也就是說， 分別對應一個值，然後接著就是一下像素點的 ，假設  的值為， 那麼  物件範圍就包含了 2 個像素點，第一個像素點的  值分別是，第二個像素點的就是 。 因此，我們在取每個像素點的  值的時候其  應該在像素點的索引值上乘以 ，然後通過  計算灰階。

如何對應到字元？

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