javascript - 我可以让 Node.JS 生成没有 html 页面的 Canvas 吗？

Question

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

我的问题是没有文档我无法生成 PNG 图像。如果我使用 Node.JS 在服务器上运行脚本，则没有用于创建 Canvas 的文档。是否有任何其他方法来创建 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);

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

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

2020 年更新:

正如@Mike'Pomax'Kamermans 在评论中指出的那样，NodeJS 现在(从 v7 开始)包含相同的 URL 对象作为浏览器，可用于将 Canvas 数据 URI 放入并保存到磁盘，类似于此答案:https://stackoverflow.com/a/11335500/2138943

旧答案(对于 Node 版本 < 7)

您可以使用 Node <canvas>由 JavaScript DOM 支持的实现，例如 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 的要求，你可以使用 canvas.pngStream()就像 @josh3736 在评论中建议的那样(如果你没有对文档本身做任何其他事情，即你只需要 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().