Draw HTML5 canvas on console

Question

I want to draw human photos on console using nodejs. To draw better quality images I need a library or module that allows me to draw images on console. There certain modules such as imaging and console-png.

However the quality is not that great. How can I draw images probably using HTML5 canvas on console?

First you would need a browser, which supports canvas, which runs on the console… — Quentin, Sep 26 '16 at 16:48
It is possible to convert that into text first but still want to a better quality. — Om3ga, Sep 26 '16 at 20:05

score 3 · Answer 1 · edited Sep 26 '16 at 17:40

3

Consoles are text devices, they're not designed for graphics. There are ways of displaying fancy colours etc. in the console but you cannot render an image file or anything there without converting it to text first, like your example, console-png.

edited Sep 26 '16 at 17:40

Laurel

5,522
11
26
49

answered Sep 26 '16 at 16:32

Keith

15,057
1
18
31

It doesn't matter if it needs to be converted to text first or not. After conversion it should have slightly better quality then currently console-png etc offers. – Om3ga Sep 26 '16 at 19:55
I'm not sure you will get much better than what console-png is giving you. Looking at console-png screenshot he is already using half-box glyph to double the horizontal resolution,. In theory he could maybe use more eg. "▄▀ ▀ █ ▌", but remember each glyph is limited to 2 colours (foreground / background). So if 1 character block required more than 2, they would be loss. Another alternative is the ascii-art npm module, but not sure this looks any better than console-png. – Keith Sep 27 '16 at 10:54

score 3 · Answer 2 · edited May 23 '17 at 10:34

Please note that this answer is for console (Not the node.js CMD prompt). As this question's title will direct some here that may be using NW.js or similar, allowing node.js console output to be to the V8 dev tools console. There are also some Github solutions that allow console to be directed to V8 dev tools for node.js.

There is also new debugging tools via Chrome Canary lets you debug your browser JavaScript files and Node.js ones in the same DevTools window in parallel.

For Chrome use the console style string directive "%c" in the "console.log" in the first string argument to specify a style.

eg

console.log("%c Blue text","background:blue;");

The second argument becomes the` style.

So the logical extension to that is to add a background image and what do you know, it works.

document.body.innerHTML += "For Chrome users hit F12 to open the console. and see it work."
console.log("%c Smile                  .","font-size:28px;color:red;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEaElEQVRYhcVXT0iUWxT/fc7ogIsW0UYdx7I2Iq8ZihauhoSoEEJNEBGkneNCUrCBSpudb1GSIEiL3IguBHUUDcL+ODoMjyAwkJT3XomL2liO4BCVVr8W5/tz5/tmxqnXe+/AWXz3nvs7v+/cc889F8hfCgE0AvgdwGMAWzZ9rM816ra/TCoA9ANIAmCemtTXVPxT5xEV+OxZsLcXnJ0FV1fBrS3R1VUZ6+0VGxuZyM84rgTw0ABpbQWXl0EyP11eljUKiYc6Zl7yG4B3AOjzgfPz+Tu26/y8YOgk3unYOaVU0/AnAJaXg+/f/5jDZ8/AS5fAo0fBQACcmgK3twULAAsK8BeA0lwEEgBYW2uBTkyAwaClgQB4/jx4/Dj44gX4/Dn48aP87eHDzoS8cEFwamvNsUQ259cB0O+3/ry7O3e2nzsH3r4NNjZaYyUlJezo6GB1dbU5dueOYPr9pt11u3OvpmEPAB88EOc1NRZoKBRiLBZjLBZjKBQyxwMBiYDx3draSlXa29sJgB4PuLkp2ACo+/KqBO4DYHOzOF9chL7Qw3g8TrvE43F6PB4CYFeX2NbV1TnsSLKlpYUAGIkIdnOzSfi+SmAbAOfmxMgADYfDGUFJMhwOEwDLysR2dHQ0o93Y2BgBsKlJsOfmzCgkDecXjXAaiXfsmBglEgmS5OTkJIuLi9nW1mYCJxIJAqDbLbYbGxsZCaysrBAAq6os/EDAjMJFALinhigTAb/fb+5zMpnMSmB4eJhut5ter5fT09MkyVQqZa79/FnwIxGTwD0AeAKACwsWAfsWNDQ00OVysaioiKlUKm0LDh2yCHR2drKgoIAAWF9fnzUCCwsmgScAsA6AL19aBvYk3N/f58TEBBcXFx1JePKklQMzMzPUNI2apnFpaSljDpDiSyewDgC7ALizk17VjNDmOoY1NRqHh9NPwdDQEAcHB7OeAlJ86Ri7WQmMjkpZzVaEurvFbnvbGotGo2kJODU1ZWQ8NzezE3BsAQl++AB++SL7pZbiYFDKs2p79apFoqenh2traxwYGKDL5SIAnjiRbm/fAkcSknK/nz4Nvn6d30WkkrBrZ2e6rT0JHceQBEdGxMjnA79+TZ/79g0cHATHx8FHj6ztu3FDtq2yEjx1CjxyBOzvl8tKXW8/ho5CZGgwKIY3bzoJXL4siVpYCIbDzrW7u+DeHvjpk3POXoigl0WzFBv69KkVxpERJ9Dbt+CtW+D6evr4mzcSlfFxMB5Pn8tUigHbZaSqUZQAsK/v4Fzo67Psu7qc89kuI8d1rGpTkwXq84HXrkmSvnolOjsrY0r7xbt3nTi5rmMgQ0Oi6pkzcp6zZbqhVVVgNOpcf1BDYoijJVO1rk5IaJokH5TLqKwsd+dstGQuF/7I5hwASvXGkeXlUuUykSguFnW7RTMlqPrnRlPqcuFvHNCUAnm05f390gdeuZJeYu36M225If/rw0SViALynz7NVKnADz5ONQ07+EWPU1X+lef5dx3fisFC3wKhAAAAAElFTkSuQmCC');");

And you have an image. As node.js is V8 then this should be the solution you are after, with a bit of extra styling to make it more image like than background like.

So to do from a canvas just use canvas.toDataURL to get the background URL

And according to this 4year old answer it also works on Firefox.. but not for me and I am sure someone that can make Edge run without overheating their GPU and shutting down their machine will tell you if it works on Edge. |:P

@2619 Sorry console to me means dev.tools, though terminal is something else as well so I think you mean CMD prompt. A quick look with google and there is a host of node.js CMD line prompt alternatives, or create your own that can accept a image stream (raw pixel stream is easiest) — Blindman67, Sep 26 '16 at 20:36
more complex way to output your base64 or image from URL (to devtools): `console.log("%c ",`font-size:50px; background:url('${ base64imageString_orImageURL_here }') center / 100% 100%;`);` — flashTGC, Jan 25 '18 at 12:08

Draw HTML5 canvas on console

2 Answers2