我可以让Node.JS生成一个没有html页面的画布？ [英] Can I let Node.JS generate a canvas without an html page?

问题描述

我想让一个Twitter bot生成一个随机rgb颜色，创建一个这种颜色的图片和tweets它。我创建了一个JS，可以生成和tweet一个随机rgb值和一块javascript，可以生成一个随机颜色的图片，但我不知道如何组合这两个。

我的问题是，我不能生成PNG图像没有文档。如果我使用Node.JS在服务器上运行脚本，则没有文档来创建画布。是否有任何其他方法来创建png图片（可能暂时将其保存到服务器），并将其附加到tweet

感谢您的帮助！

这是我用来推送随机值的代码：

  var Twit = require（'twit'）
 
 var T = new Twit（{
 consumer_key：'###'，
 consumer_secret：'###'，
 access_token：'###'，
 access_token_secret：'###'
}）
 
 function tweet（）{
 //生成一个随机颜色
 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 color 
 T.post（'statuses / update'，{status：color}）; 
} 
 
 setTimeout（tweet，30000）; 
  

这是一个JS脚本，在网页上生成一个随机颜色的PNG文件： / p>

  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'）; 
 
 //绘图框
 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（）; 
 
 //将画布图像另存为数据url（默认为png格式）
 var dataURL = canvas.toDataURL（）; 
 
 //将canvasImg图像src设置为dataURL 
 //因此可以保存为图像
 document.getElementById（'canvasImg'）。src = dataURL; 
  

解决方案

< canvas> 使用JavaScript DOM支持的实现，例如 node-canvas < a>使用 jsDom 。例如， canvas ，你的代码应该看起来像这样：

  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 +）; 
 
 
 //绘图框
 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（）; 
 
 //将画布图像另存为数据url（默认为png格式）
 var dataURL = canvas.toDataURL（）; 
 
 //将canvasImg图像src设置为dataURL 
 //因此可以保存为图像
 document.getElementById（'canvasImg'）。src = dataURL; 
  

如果你想摆脱jsDom的要求，你可以使用 canvas。 pngStream（） like @ josh3736建议在评论中（如果你不对文档本身做任何其他事情，你只需要画布）

Canvas＃pngStream（）

要创建一个PNGStream，只需调用canvas.pngStream（），流
将开始发出数据事件，最后发出结束。如果
出现异常，则发生错误事件。

  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'）;}）; 
 

目前只支持同步流，但我们计划支持异步流（当然:) ）。直到那时，Canvas＃toBuffer（callback）的替代方法是使用eio_custom（）异步。







I'm trying to make a Twitter bot that generates a random rgb colour, creates a picture of this colour and tweets it. I've created a piece of JS that can generate and tweet a random rgb value and a piece of javascript that can generate a picture of a random colour but I'm not sure how to combine the two.

My problem is that I can't generate the PNG image without having a document. If I run the script on a server using Node.JS there isn't a document to create the canvas in. Is there any other way to create a png picture (maybe by temporarily saving it to the server) and attaching it to a tweet?

Thanks for your help!

This is the code I have for tweeting a random value:

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

And this is a JS script that generates a PNG file of a random colour on a web page:

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;

解决方案

You can use an Node <canvas> implementation backed with a JavaScript DOM, such as node-canvas with jsDom. For example with canvas, your code should look something like this:

    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;

If you want to get rid of the jsDom requirement you can use canvas.pngStream() like @josh3736 suggests in the comments (if you aren't doing anything else with the document itself ie. you only need the canvas)

Canvas#pngStream()

To create a PNGStream simply call canvas.pngStream(), and the stream will start to emit data events, finally emitting end when finished. If an exception occurs the error event is emitted.

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

Currently only sync streaming is supported, however we plan on supporting async streaming as well (of course :) ). Until then the Canvas#toBuffer(callback) alternative is async utilizing eio_custom().

这篇关于我可以让Node.JS生成一个没有html页面的画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！