2016-09-26 211 views
0

我想使用nodejs在控制台上绘制人物照片。为了绘制出更好质量的图像,我需要一个库或模块,使我可以在控制台上绘制图像。有某些模块,如imagingconsole-png在控制台上绘制HTML5画布

然而,质量并不是那么好。如何在控制台上使用HTML5画布绘制图像?

+0

首先,您需要一个浏览器,它支持在控制台上运行的画布... – Quentin

+0

可以先将它转换为文本,但仍然希望获得更好的质量。 – 2619

回答

3

控制台是文本设备,它们不是为图形设计的。在控制台中显示奇特的颜色等方式,但你不能渲染图像文件或其他任何东西,而无需先将其转换为文本,就像你的例子,console-png。

+0

它是否需要首先转换为文本并不重要。转换后,它应该有稍好的质量,然后当前console-png等提供。 – 2619

+0

我不确定你会比console-png给你带来的好多少。查看console-png截图,他已经使用半框字形来加倍水平分辨率。理论上他可以使用更多的例如。 “▄▀▀█▌”,但请记住每个字形限于2种颜色(前景/背景)。所以如果1个字符块需要超过2个,他们会失败。另一种选择是ascii-art npm模块,但不确定这看起来比console-png好。 – Keith

2

请注意,这个答案是为控制台(不是node.js CMD提示)。由于这个问题的标题将指导一些可能使用NW.js或类似的东西,从而允许node.js控制台输出到V8开发工具控制台。还有一些Github解决方案允许将控制台定向到node.js的V8开发工具。

在同一DevTools窗口中还有一些Chrome Canary lets you debug your browser JavaScript files and Node.js并行调试工具。

对于Chrome,请在第一个字符串参数的“console.log”中使用控制台样式字符串指令“%c”来指定样式。

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

第二个参数变成了`风格。

因此,逻辑扩展是添加一个背景图像,你知道什么,它的工作原理。

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');");

而且你有一个形象。由于node.js是V8,那么这应该是你之后的解决方案,用一些额外的样式使它像背景一样更像图像。

所以从帆布做的只是用canvas.toDataURL拿到后台网址

并据此4year old answer它也适用于Firefox的..但不适合我,我相信别人,可以使边缘运行而不会过热他们的GPU和关闭他们的机器会告诉你它是否在Edge上工作。 |:P

+1

我的意思是终端不是镀铬控制台。 – 2619

+1

@ 2619对不起,控制台对我来说意味着dev.tools,尽管终端也是别的,所以我认为你的意思是CMD提示。快速浏览谷歌,并有一个节点的主机。js CMD行提示替代品,或者创建您自己的可以接受图像流(原始像素流最简单) – Blindman67

+0

更复杂的方式来输出您的base64或图像从URL(到devtools): 'console.log(“%c “,'font-size:50px; background:url('$ {base64imageString_orImageURL_here}')center/100%100%;');'' – flashTGC