如何在 Meteor 中生成图像 server-side 并通过 Iron Router 为它们提供服务？

Question

正如标题所说，我只是想在服务器上生成一个图像，然后通过 Iron Router 在浏览器中提供它。

这是我目前的情况：

server/methods.js:

Meteor.methods({
  getImage(cardId, styleId) {
    var canvas = new Canvas(500, 200);
    var ctx = canvas.getContext('2d');

    ctx.font = '26px "Comic Sans"';
    ctx.fillText('Hello World', 50, 80);

    var buffer = canvas.toBuffer();
    buffer = canvas.toDataURL();

    return buffer;
  }
});

routes/routes.js:

Router.route('/i/:cardid/:styleid.png', function() {
  var imgContent = Meteor.call('getImage', this.params.cardid, this.params.styleid);
  //imgContent = `<html><body><img src="${imgContent}"></body></html>`;

  this.response.writeHeader('200', {
    'Content-Type': 'image/png',
    'Content-Length': imgContent.length
  });

  this.response.write(imgContent);

  this.response.end();
}, {where: 'server'});

如果我取消注释 routes.js 中的行并注释掉 image/png header，我可以让图像显示在 HTML 图像标签内，但是这不是我想要的，因为我只想提供实际图像，不 HTML.

如有任何帮助，我们将不胜感激。谢谢！

编辑我也试过退回这个：

var buffer = canvas.toBuffer();
//buffer = canvas.toDataURL();

buffer = new Buffer(buffer, 'binary').toString('base64');

没有成功。

编辑 2 基本上我正在尝试这样做：但只有 Meteor、Canvas 和 Iron Router。

Answer 1

我想多了一点。您可以在 onAfterAction()

中简单地执行以下操作

document.type="img";
document.location=url;

但是这样做之后你会丢失路由器。

您仍会在生成的页面中看到 html，因为如果您在浏览器中打开图像的 url，它会自动在其周围添加自己的 html 标记。为了证明这一点，只需 right-click 在此处的图像上和 select "open image in new tab"

Answer 2

您可以将 Picker 用于服务器端路由，因为它实现了 Node 的 ServerResponse 模块 [https://nodejs.org/api/http.html#http_class_http_serverresponse][1] [https://github.com/meteorhacks/picker/][1]

    Picker.route('/i/:cardid/:styleid.png', function(params, req, res, next) {
       var imgContent = Meteor.call('getImage', params.cardid, params.styleid);

  res.writeHead('200', {
    'Content-Type': 'image/png',
    'Content-Length': imgContent.length
  });

 res.end(imgContent);
    });

Answer 3

我可以通过执行以下操作使其正常工作：

server/methods.js:

Meteor.methods({
  getImage(cardId, styleId) {
    var canvas = new Canvas(500, 200);
    var ctx = canvas.getContext('2d');

    ctx.font = '26px "Comic Sans"';
    ctx.fillText('Hello World', 50, 80);

    return canvas.toBuffer();
  }
});

routes/routes.js

Router.route('/i/:cardid/:styleid.png', function() {
  var imgContent = Meteor.call('getImage', this.params.cardid, this.params.styleid);
  imgContent = new Buffer(imgContent, 'binary');

  this.response.writeHeader('200', {
    'Content-Type': 'image/png',
    'Content-Length': imgContent.length
  });

  this.response.write(imgContent);

  this.response.end();
}, {where: 'server'});

基本上只需要输出正确的数据即可！

如何在 Meteor 中生成图像 server-side 并通过 Iron Router 为它们提供服务？

How to generate images server-side in Meteor and serve them via Iron Router?

javascript

canvas

node.js

meteor

iron-router