Question

我正在尝试制作一个生成随机rgb颜色的Twitter机器人，创建这种颜色的图片并发布它。我已经创建了一个JS，它可以生成和发送一个随机rgb值和一段javascript，可以生成一个随机颜色的图片，但我不知道如何将两者结合起来。

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

感谢您的帮助！

这是我发布随机值的代码：

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

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

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;

Answer 1

您可以使用支持JavaScript DOM的节点<canvas>实施，例如node-canvas和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+")";


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

如果你想摆脱jsDom的要求你可以在评论中使用像{josh3736建议的canvas.pngStream()（如果你没有对文件本身做任何其他事情，即你只需要画布）< / p>

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（回调）替代方案是使用eio_custom（）异步。

我可以让Node.JS生成没有html页面的画布吗？

1 个答案: