javascript - 使用 Node 创建的图像响应 GET 请求

Question

我有一个简单的 Node Api，它接受 GET 请求，使用 node canvas 构造 Canvas 。 ，将其另存为 PNG，并将其发送回服务器。我可以保存它，但无法将其返回到服务器。路由器是:

router.get('/canvas', function(req, res) {

    var callback = function(data){

         res.writeHead(200, {'Content-Type': 'text/html'});
          res.write('<img src="data:image/jpeg;base64,')
          res.write(new Buffer(data).toString('base64'));
          res.end('"/>');
    };

    canvas.getCanvas(callback);

});

Node 模型是:

  var getCanvas = function(callback){

    var Canvas = require('canvas'),
    canvas = new Canvas(150, 150),
    ctx = canvas.getContext('2d'),
    fs = require('fs');


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

    var te = ctx.measureText('Awesome!');
    ctx.strokeStyle = 'rgba(0,0,0,0.5)';
    ctx.beginPath();
    ctx.lineTo(50, 102);
    ctx.lineTo(50 + te.width, 102);
    ctx.stroke();


    var out = fs.createWriteStream(__dirname + '/text2.png'),
        stream = canvas.pngStream();


    stream.on('data', function(chunk){
      out.write(chunk);
    });

    stream.on('end', function(){
      console.log('saved png');
      fs.readFile(__dirname +'/text2.png', function(err, data) {

          if (err) throw err; // Fail if the file can't be read.

            callback(data);
        });
    });

  }

module.exports.getCanvas = getCanvas;

PNG 被保存到文件系统，但在浏览器对 GET 请求的响应中我只看到:

<img src="data:image/jpeg;base64,iVBORw0KGgo="/>

而且大小只有370字节，所以浏览器显然是收不到图像的。如何将此图像作为 GET 请求的响应发送回来？还有一个相关的问题，我是否需要将其保存到文件系统，或者我可以在创建图像后以某种方式将其流回吗？

Answer 1

不要先写入文件，然后读取该文件，而是将 block 添加到数组中，然后将其连接到缓冲区中，因此更改:

stream.on('data', function(chunk){
  out.write(chunk);
});

成为

var chunks = [];
stream.on('data', function(chunk){
  out.write(chunk); //remove this if you have no need to keep file local
  chunks.push(chunk);
});

然后将你的终端更改为:

stream.on('end', function(){
  console.log('saved png');
  callback(Buffer.concat(chunks));
});

由于您的回调现在接受缓冲区，因此也更改此位:

var callback = function(data){

     res.writeHead(200, {'Content-Type': 'text/html'});
      res.write('<img src="data:image/jpeg;base64,')
      res.write(data.toString('base64'));
      res.end('"/>');
};