SOURCE

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.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 '&nbsp;';
  }
}

// 根据rgb值计算灰度
function getGray(r, g, b) {
  return 0.3 * r + 0.59 * g + 0.11 * 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;
  }
}

<input type="file" id="up-button">
</input>
<canvas id="cv">
</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;
    }