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;
const grayCharInput = document.getElementById('grayCharInput').value

const grayValue = 255 / (grayCharInput.length + 2)
// 根据灰度生成相应字符
function toText(g) {
  const grayCharArr = ['█','@', '#', '$', 'k', 't', 'j', 'i', '.', ' '];
  if (g <= 5) {
    return grayCharArr[0]
  } else if (g > 10 && g <= 30) {
    return grayCharArr[1]
  } else if (g > 30 && g <= 60) {
    return grayCharArr[2]
  } else if (g > 60 && g <= 120) {
    return grayCharArr[3]
  } else if (g > 120 && g <= 150) {
    return grayCharArr[4]
  } else if (g > 150 && g <= 180) {
    return grayCharArr[5]
  } else if (g > 180 && g <= 210) {
    return grayCharArr[6]
  } else if (g > 210 && g <= 240) {
    return grayCharArr[7]
  } else {
    return grayCharArr[8]
  }
}

// 根据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;
  }
}

<div id="toolbar">
  <div class="tool">
    <label for="grayChar">
      灰阶填充字符：
    </label>
    <input type="text" id="grayCharInput" placeholder="从深到浅，无需分隔" />
    <p class="gray">
      默认全黑使用
      <span style="color:black">
        █
      </span>
    </p>
    <p class="gray">
      全白使用空格
    </p>
  </div>
  <div class="tool">
    <input type="file" id="upfile" />
  </div>
</div>
<canvas id="cv">
</canvas>
<div id="txt">
</div>

* {
  margin: 0;
  padding: 0;
}

#toolbar {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 100px;
  border: solid;
}

.tool {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 100%;
  margin-right: 20px;
}

.gray {
  color: gray;
}

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