NodeJS:提供node-canvas生成的png

Sun*_*Cho 9 canvas node.js

我想使用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;
Run Code Online (Sandbox Code Playgroud)

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;
Run Code Online (Sandbox Code Playgroud)

但是当我在浏览器中访问该路线时,我看不到任何png.我对节点的掌握不够牢固,无法理解发生了什么.有人能指出我正确的方向吗?

Cri*_*cot 12

试试这个我的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;
Run Code Online (Sandbox Code Playgroud)

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

它将从您的Canvas获取PNG流,并将此流传输到响应流.以这种方式做事,您不需要打电话res.end(),因为当您的PNG流结束时,您的响应流也将结束.