image-ascii-loader

A webpack loader that load image as ascii text.

Demo

Generate this

from

feel free to clone and play with demo project.

Guide

npm i -D image-ascii-loader

then edit your webpack.config.js .

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.jpe?g$/,
        use: ["image-ascii-loader"]
      }
    ]
  },
};

With this config, all your jpeg file will be tranform to string, usually this is not what you want. You can skip configuration and do this instead:

const ascii = require('image-ascii-loader!./demo.jpg');

document.getElementById('demo').innerHTML = ascii;

You can specify options use resourceQuery:

// 100 characters per line 
const ascii = require('./demo.jpg?width=100');

// use other characters to draw the image
const ascii = require('./demo.jpg?alphabet=blocks');

check ascii-art-image for more options.

More

Image source: readme of https://github.com/khrome/ascii-art project