update

Author: zcfan

.npmignore

@@ -0,0 +1,2 @@
+node_modules
+/demo

README.md

@@ -1,3 +1,62 @@
 # image-ascii-loader
 A webpack loader that load image as ascii text.
 
+## Demo
+
+Generate this
+
+![demo](./doc/demo.png)
+
+from
+
+![demo](./demo/demo.jpg)
+
+feel free to clone and play with demo project.
+
+## Guide
+
+```bash
+npm i -D image-ascii-loader
+```
+
+then edit your `webpack.config.js` .
+
+```javascript
+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:
+
+```javascript
+const ascii = require('image-ascii-loader!./demo.jpg');
+
+document.getElementById('demo').innerHTML = ascii;
+```
+
+You can specify options use resourceQuery:
+
+```javascript
+// 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](https://www.npmjs.com/package/ascii-art-image) for more options.
+
+## More
+
+![I like this one](./doc/demo1.png)
+
+Image source: readme of https://github.com/khrome/ascii-art project

demo/bundle.js

@@ -1,5 +1,5 @@
 {
-  "name": "playwebpackloader",
+  "name": "demo",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
@@ -13,9 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10"
-  },
-  "devDependencies": {
+    "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1"
   }
 }

demo/package.json

@@ -0,0 +1,45 @@
+"use strict";
+
+var _require = require('loader-utils'),
+    parseQuery = _require.parseQuery;
+
+var AsciiArtImage = require('ascii-art-image');
+
+var stripAnsi = require('strip-ansi');
+
+module.exports.pitch = function () {
+  var callback = this.async();
+  var image = new AsciiArtImage(getOptions.call(this));
+  image.write(function (err, ascii) {
+    if (err) {
+      callback(err);
+    } else {
+      callback(null, processAscii(ascii));
+    }
+  });
+};
+
+function getOptions() {
+  var options = {
+    width: 80,
+    alphabet: 'hatching'
+  };
+
+  if (this.resourceQuery) {
+    var queryOptions = parseQuery(this.resourceQuery);
+
+    if (queryOptions.width) {
+      queryOptions.width = parseInt(queryOptions.width);
+    }
+
+    Object.assign(options, queryOptions);
+  }
+
+  options.filepath = this.resourcePath;
+  return options;
+}
+
+function processAscii(ascii) {
+  var html = stripAnsi(ascii).replace(/\n/g, '<br/>').replace(/ /g, '&nbsp;');
+  return "export default `".concat(html, "`");
+}

doc/demo.png

@@ -1,15 +1,15 @@
 {
-  "name": "img-ascii-loader",
-  "version": "1.0.0",
-  "description": "",
+  "name": "image-ascii-loader",
+  "version": "1.0.3",
+  "description": "A webpack loader that load image as ascii text.",
   "main": "lib/index.js",
   "scripts": {
-    "build": "babel src -d lib",
+    "build": "babel index.js -d lib",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
+  "keywords": ["webpack", "loader", "webpack-loader", "ascii", "image", "jpeg"],
+  "author": "[email protected]",
+  "license": "MIT",
   "dependencies": {
     "ascii-art-ansi": "^1.3.3",
     "ascii-art-image": "^1.2.2",