bytev-charts/lib/plugin/three.js/examples/js/effects/AsciiEffect.js

基于echarts和JavaScript及ES6封装的一个可以直接调用的图表组件库，内置主题设计，简单快捷，且支持用户自定义配置； npm 安装方式: npm install bytev-charts 若启动提示还需额外install插件,则运行 npm install @babel/runtime-corejs2 即可;

import "core-js/modules/es.regexp.exec.js";
import "core-js/modules/es.string.split.js";
console.warn("THREE.AsciiEffect: As part of the transition to ES6 Modules, the files in 'examples/js' were deprecated in May 2020 (r117) and will be deleted in December 2020 (r124). You can find more information about developing using ES6 Modules in https://threejs.org/docs/#manual/en/introduction/Installation.");
/**
 * Ascii generation is based on http://www.nihilogic.dk/labs/jsascii/
 * Maybe more about this later with a blog post at http://lab4games.net/zz85/blog
 *
 * 16 April 2012 - @blurspline
 */

THREE.AsciiEffect = function (renderer, charSet, options) {
  // its fun to create one your own!
  charSet = charSet === undefined ? ' .:-=+*#%@' : charSet; // ' .,:;=|iI+hHOE#`$';
  // darker bolder character set from https://github.com/saw/Canvas-ASCII-Art/
  // ' .\'`^",:;Il!i~+_-?][}{1)(|/tfjrxnuvczXYUJCLQ0OZmwqpdbkhao*#MW&8%B@$'.split('');

  if (!options) options = {}; // Some ASCII settings

  var bResolution = !options['resolution'] ? 0.15 : options['resolution']; // Higher for more details

  var iScale = !options['scale'] ? 1 : options['scale'];
  var bColor = !options['color'] ? false : options['color']; // nice but slows down rendering!

  var bAlpha = !options['alpha'] ? false : options['alpha']; // Transparency

  var bBlock = !options['block'] ? false : options['block']; // blocked characters. like good O dos

  var bInvert = !options['invert'] ? false : options['invert']; // black is white, white is black

  var strResolution = 'low';
  var width, height;
  var domElement = document.createElement('div');
  domElement.style.cursor = 'default';
  var oAscii = document.createElement("table");
  domElement.appendChild(oAscii);
  var iWidth, iHeight;
  var oImg;

  this.setSize = function (w, h) {
    width = w;
    height = h;
    renderer.setSize(w, h);
    initAsciiSize();
  };

  this.render = function (scene, camera) {
    renderer.render(scene, camera);
    asciifyImage(renderer, oAscii);
  };

  this.domElement = domElement; // Throw in ascii library from http://www.nihilogic.dk/labs/jsascii/jsascii.js

  /*
  * jsAscii 0.1
  * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
  * MIT License [http://www.nihilogic.dk/licenses/mit-license.txt]
  */

  function initAsciiSize() {
    iWidth = Math.round(width * fResolution);
    iHeight = Math.round(height * fResolution);
    oCanvas.width = iWidth;
    oCanvas.height = iHeight; // oCanvas.style.display = "none";
    // oCanvas.style.width = iWidth;
    // oCanvas.style.height = iHeight;

    oImg = renderer.domElement;

    if (oImg.style.backgroundColor) {
      oAscii.rows[0].cells[0].style.backgroundColor = oImg.style.backgroundColor;
      oAscii.rows[0].cells[0].style.color = oImg.style.color;
    }

    oAscii.cellSpacing = 0;
    oAscii.cellPadding = 0;
    var oStyle = oAscii.style;
    oStyle.display = "inline";
    oStyle.width = Math.round(iWidth / fResolution * iScale) + "px";
    oStyle.height = Math.round(iHeight / fResolution * iScale) + "px";
    oStyle.whiteSpace = "pre";
    oStyle.margin = "0px";
    oStyle.padding = "0px";
    oStyle.letterSpacing = fLetterSpacing + "px";
    oStyle.fontFamily = strFont;
    oStyle.fontSize = fFontSize + "px";
    oStyle.lineHeight = fLineHeight + "px";
    oStyle.textAlign = "left";
    oStyle.textDecoration = "none";
  }

  var aDefaultCharList = " .,:;i1tfLCG08@".split("");
  var aDefaultColorCharList = " CGO08@".split("");
  var strFont = "courier new, monospace";
  var oCanvasImg = renderer.domElement;
  var oCanvas = document.createElement("canvas");

  if (!oCanvas.getContext) {
    return;
  }

  var oCtx = oCanvas.getContext("2d");

  if (!oCtx.getImageData) {
    return;
  }

  var aCharList = bColor ? aDefaultColorCharList : aDefaultCharList;
  if (charSet) aCharList = charSet;
  var fResolution = 0.5;

  switch (strResolution) {
    case "low":
      fResolution = 0.25;
      break;

    case "medium":
      fResolution = 0.5;
      break;

    case "high":
      fResolution = 1;
      break;
  }

  if (bResolution) fResolution = bResolution; // Setup dom

  var fFontSize = 2 / fResolution * iScale;
  var fLineHeight = 2 / fResolution * iScale; // adjust letter-spacing for all combinations of scale and resolution to get it to fit the image width.

  var fLetterSpacing = 0;

  if (strResolution == "low") {
    switch (iScale) {
      case 1:
        fLetterSpacing = -1;
        break;

      case 2:
      case 3:
        fLetterSpacing = -2.1;
        break;

      case 4:
        fLetterSpacing = -3.1;
        break;

      case 5:
        fLetterSpacing = -4.15;
        break;
    }
  }

  if (strResolution == "medium") {
    switch (iScale) {
      case 1:
        fLetterSpacing = 0;
        break;

      case 2:
        fLetterSpacing = -1;
        break;

      case 3:
        fLetterSpacing = -1.04;
        break;

      case 4:
      case 5:
        fLetterSpacing = -2.1;
        break;
    }
  }

  if (strResolution == "high") {
    switch (iScale) {
      case 1:
      case 2:
        fLetterSpacing = 0;
        break;

      case 3:
      case 4:
      case 5:
        fLetterSpacing = -1;
        break;
    }
  } // can't get a span or div to flow like an img element, but a table works?
  // convert img element to ascii


  function asciifyImage(canvasRenderer, oAscii) {
    oCtx.clearRect(0, 0, iWidth, iHeight);
    oCtx.drawImage(oCanvasImg, 0, 0, iWidth, iHeight);
    var oImgData = oCtx.getImageData(0, 0, iWidth, iHeight).data; // Coloring loop starts now

    var strChars = ""; // console.time('rendering');

    for (var y = 0; y < iHeight; y += 2) {
      for (var x = 0; x < iWidth; x++) {
        var iOffset = (y * iWidth + x) * 4;
        var iRed = oImgData[iOffset];
        var iGreen = oImgData[iOffset + 1];
        var iBlue = oImgData[iOffset + 2];
        var iAlpha = oImgData[iOffset + 3];
        var iCharIdx;
        var fBrightness;
        fBrightness = (0.3 * iRed + 0.59 * iGreen + 0.11 * iBlue) / 255; // fBrightness = (0.3*iRed + 0.5*iGreen + 0.3*iBlue) / 255;

        if (iAlpha == 0) {
          // should calculate alpha instead, but quick hack :)
          //fBrightness *= (iAlpha / 255);
          fBrightness = 1;
        }

        iCharIdx = Math.floor((1 - fBrightness) * (aCharList.length - 1));

        if (bInvert) {
          iCharIdx = aCharList.length - iCharIdx - 1;
        } // good for debugging
        //fBrightness = Math.floor(fBrightness * 10);
        //strThisChar = fBrightness;


        var strThisChar = aCharList[iCharIdx];
        if (strThisChar === undefined || strThisChar == " ") strThisChar = "&nbsp;";

        if (bColor) {
          strChars += "<span style='" + "color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");" + (bBlock ? "background-color:rgb(" + iRed + "," + iGreen + "," + iBlue + ");" : "") + (bAlpha ? "opacity:" + iAlpha / 255 + ";" : "") + "'>" + strThisChar + "</span>";
        } else {
          strChars += strThisChar;
        }
      }

      strChars += "<br/>";
    }

    oAscii.innerHTML = "<tr><td>" + strChars + "</td></tr>"; // console.timeEnd('rendering');
    // return oAscii;
  } // end modified asciifyImage block

};