javascript - Draw HTML5 canvas on console - Stack Overflow

admin管理员组

文章数量:1405636

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?

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?

• javascript
• node.js
• html
• canvas

Share Follow asked Sep 26, 2016 at 16:26 Om3gaOm3ga 33.1k4545 gold badges149149 silver badges230230 bronze badges 2

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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 bees 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

本文标签： javascriptDraw HTML5 canvas on consoleStack Overflow