NodeJS：提供node-canvas生成的png

Question

我想使用node-canvas生成並提供.png文件。 使用Express，這是我到目前為止所做的：

draw_badge.js

function draw() {
  var Canvas = require('canvas'),
      Image = Canvas.Image,
      canvas = new Canvas(200, 200),
      ctx = canvas.getContext('2d');

  ctx.font = '30px Impact';
  ctx.rotate(0.1);
  ctx.fillText('Awesome!', 50, 100);

  return canvas;
}

module.exports = draw;

badge.js

var express = require('express');
var router = express.Router();
var draw = require('../lib/draw_badge.js');

router.get('/show', function (req, res, next) {
  res.setHeader('Content-Type', 'image/png');
  res.end(draw());
});

module.exports = router;

但是當我在瀏覽器中訪問該路線時，我看不到任何png。 我對節點的掌握不夠牢固，無法理解發生了什么。 有人能指出我正確的方向嗎？

Answer 1

試試這個我的badge.js ：

var express = require('express');
var router = express.Router();
var draw = require('../lib/draw_badge.js');

router.get('/show', function (req, res, next) {
  res.setHeader('Content-Type', 'image/png');
  draw().pngStream().pipe(res);
});

module.exports = router;

注意代碼draw().pngStream().pipe(res);

它將從您的Canvas獲取PNG流，並將此流傳輸到響應流。 這樣做，您不需要調用res.end() ，因為當您的PNG流結束時，您的響應流也將結束。