繁体   English   中英

在控制台上绘制HTML5画布

[英]Draw HTML5 canvas on console

我想使用nodejs在控制台上绘制人像。 要绘制质量更好的图像,我需要一个库或模块,该库或模块可以在控制台上绘制图像。 有某些模块,例如Imagingconsole-png

但是质量不是那么好。 如何在控制台上使用HTML5 canvas绘制图像?

控制台是文本设备,不是为图形设计的。 有多种方法可以在控制台中显示奇特的颜色等,但是您不能在不首先将其转换为文本的情况下渲染图像文件或其中的任何内容,例如您的示例console-png。

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

Chrome Canary还提供了新的调试工具, 可让您在同一DevTools窗口中并行调试浏览器的JavaScript文件和 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来获取背景URL

并且根据这个已有4年历史的答案,它也可以在Firefox上运行。.但是对我而言,这不是。我确信可以使Edge运行而不会导致GPU过热并关闭其计算机的人会告诉您它是否可以在Edge上运行。 |:P

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM