Posso consentire a Node.JS di generare una canvas senza una pagina HTML?

Sto cercando di creare un bot su Twitter che genera un colore rgb casuale, crea un’immagine di questo colore e lo tweet. Ho creato un pezzo di JS che può generare e twittare un valore rgb casuale e un pezzo di javascript che può generare un’immagine di un colore casuale, ma non sono sicuro di come combinare i due.

Il mio problema è che non riesco a generare l’immagine PNG senza avere un documento. Se eseguo lo script su un server utilizzando Node.JS non c’è un documento per creare la canvas. C’è un altro modo per creare un’immagine png (magari salvandolo temporaneamente sul server) e collegarlo a un tweet ?

Grazie per l’aiuto!

Questo è il codice che ho per twittare un valore casuale:

var Twit = require('twit') var T = new Twit({ consumer_key: '###', consumer_secret: '###', access_token: '###', access_token_secret: '###' }) function tweet() { //Generate a random colour var r = Math.floor((Math.random() * 256)); var g = Math.floor((Math.random() * 256)); var b = Math.floor((Math.random() * 256)); var color = "rgb("+r+","+g+","+b+")"; // tweet that colour T.post('statuses/update', { status: color }); } setTimeout(tweet, 30000); 

E questo è uno script JS che genera un file PNG di un colore casuale su una pagina web:

 var r = Math.floor((Math.random() * 256)); var g = Math.floor((Math.random() * 256)); var b = Math.floor((Math.random() * 256)); var color = "rgb("+r+","+g+","+b+")"; var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // draw box context.beginPath(); context.moveTo(0, 00); context.lineTo(0, 800); context.lineTo(800, 800); context.lineTo(800, 0); context.closePath(); context.lineWidth = 5; context.fillStyle = color; context.fill(); // save canvas image as data url (png format by default) var dataURL = canvas.toDataURL(); // set canvasImg image src to dataURL // so it can be saved as an image document.getElementById('canvasImg').src = dataURL; 

È ansible utilizzare un’implementazione Nodo supportata con un DOM JavaScript, come il canvas del nodo con jsDom . Ad esempio con canvas , il tuo codice dovrebbe apparire in questo modo:

  var Canvas = require('canvas'); var Image = Canvas.Image; var canvas = new Canvas(800, 800); var context = canvas.getContext('2d'); var r = Math.floor((Math.random() * 256)); var g = Math.floor((Math.random() * 256)); var b = Math.floor((Math.random() * 256)); var color = "rgb("+r+","+g+","+b+")"; // draw box context.beginPath(); context.moveTo(0, 00); context.lineTo(0, 800); context.lineTo(800, 800); context.lineTo(800, 0); context.closePath(); context.lineWidth = 5; context.fillStyle = color; context.fill(); // save canvas image as data url (png format by default) var dataURL = canvas.toDataURL(); // set canvasImg image src to dataURL // so it can be saved as an image document.getElementById('canvasImg').src = dataURL; 

Se vuoi eliminare il requisito jsDom puoi usare canvas.pngStream() come @ josh3736 suggerisce nei commenti (se non stai facendo altro con il documento stesso, cioè hai solo bisogno del canvas)

Canvas # pngStream ()

Per creare un PNGStream basta chiamare canvas.pngStream (), e lo stream inizierà a emettere eventi di dati, emettendo infine una volta terminato. Se si verifica un’eccezione, l’evento di errore viene emesso.

 var fs = require('fs'), , out = fs.createWriteStream(__dirname + '/text.png') , stream = canvas.pngStream(); stream.on('data', function(chunk){out.write(chunk); }); stream.on('end', function(){console.log('saved png'); }); 

Attualmente è supportato solo lo streaming di sincronizzazione, tuttavia abbiamo intenzione di supportare anche lo streaming asincrono (ovviamente :)). Fino ad allora l’alternativa Canvas # toBuffer (callback) è asincrona utilizzando eio_custom ().