簡體   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