NodeJS：由节点画布生成的服务png [英] NodeJS: serve png generated by node-canvas

问题描述

我想使用节点画布来生成并提供.png文件。使用Express，这是我到目前为止所做的：

I would like to generate and serve a .png file using node-canvas. Using Express, this is what I have done so far:

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。我对节点的掌握不够坚定，无法理解正在发生的事情。有人可以指出我正确的方向吗？

But when I go to the route in my browser, I don't see any png. My grasp of node is not firm enough to understand what is going on. Can anyone point me to the right direction?

推荐答案

尝试以下i n 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流结束时，响应流也将结束。

It will obtain a PNG stream from your Canvas and will pipe this stream to the response stream. Doing things this way, you don't need to call res.end(), because when your PNG stream will end, so will your response stream be ended.

这篇关于NodeJS：由节点画布生成的服务png的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！