ascii/libs/ascii.js

convert pictures to ascii arts based on node-canvas

// 感谢这篇文章的启发 [基于canvas将图片转化成字符画](http://www.cssha.com/img2txt-canvas)

export default class asciiFromCanvas {
  constructor() {
    this.style = "<style type='text/css'>* {margin: 0;padding: 0;} .ascii {font-size: 12px;font-family: simsun;}</style>"
    // 按照不同的终端输出
    this.types = {
      cli: {
        br: '\n',
        blank: ' '
      },
      html: {
        br: '</br>',
        blank: '&nbsp;'
      }
    }
  }

  // 根据灰度生成相应字符
  toText(type, 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 this.types[type].blank
    }
  }

  // 根据rgb值计算灰度
  getGray(r, g, b) {
    return 0.299 * r + 0.578 * g + 0.114 * b
  }

  // 初始化
  init(type, ctx, pic) {
    var data = ctx.getImageData(0, 0, pic.width, pic.height)
    var text = ''

    for (h = 0; h < data.height; h += 12) {
      var p = '';
      for (w = 0; w < data.width; w += 6) {
        var index = (w + data.width * h) * 4;
        var r = data.data[index + 0];
        var g = data.data[index + 1];
        var b = data.data[index + 2];
        var gray = this.getGray(r, g, b);
        p += this.toText(type, gray);
      }
      p += this.types[type].br;
      text += p;
    }

    return (type === 'html') ? this.style + "<div class='ascii'>" + text + '</div>' : text;
  }
}