NodeJS: obsługuj png generowany przez węzeł-canvas

Question

Chciałbym wygenerować i udostępnić plik .png za pomocą canvas-węzła. Korzystanie Express, jest to, co zrobiłem do tej pory:

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; 

Ale kiedy idę na trasie w przeglądarce , Nie widzę żadnego png. Moje zrozumienie węzła nie jest wystarczająco mocne, aby zrozumieć, co się dzieje. Czy ktoś może wskazać mi właściwy kierunek?

Answer 1

Spróbuj To wam 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; 

Wskazówka Kodeksu draw().pngStream().pipe(res);

Będzie uzyskać strumień PNG z płótna i będzie rura tego strumienia do strumienia odpowiedzi. Robiąc to w ten sposób, nie musisz dzwonić pod numer res.end(), ponieważ po zakończeniu strumienia PNG Twój strumień odpowiedzi zostanie zakończony.