【问题标题】:Nodejs - How to show qr-image result in viewNodejs - 如何在视图中显示 qr-image 结果
【发布时间】:2014-12-15 18:33:40
【问题描述】:

我使用 Nodejs 的qr-image 插件生成二维码,效果很好。

问题是在 ejs 中显示结果图像。

var express = require('express');
var router = express.Router();
var qr = require('qr-image');

router.get('/', function(req, res) {
    var code = qr.image("text to show in qr", { type: 'png', ec_level: 'H', size: 10, margin: 0 });
    res.type('png');
    code.pipe(res);
    // res.render('index', { title: 'QR Page', qr: code });
});

当我取消注释最后一行时,nodejs 崩溃。 如何发送code作为变量查看?

更新:

此代码在结果页面中返回[object Object]

var code = qr.image("text to show in qr", { type: 'png', ec_level: 'H', size: 10, margin: 0 });
res.render('index', { title: 'QR Page', qr: code });

console.log(code) 也显示了这个:

{ _readableState:
   { highWaterMark: 16384,
     buffer: [],
     length: 0,
     pipes: null,
     pipesCount: 0,
     flowing: false,
     ended: false,
     endEmitted: false,
     reading: false,
     calledRead: false,
     sync: true,
     needReadable: false,
     emittedReadable: false,
     readableListening: false,
     objectMode: false,
     defaultEncoding: 'utf8',
     ranOut: false,
     awaitDrain: 0,
     readingMore: false,
     decoder: null,
     encoding: null },
  readable: true,
  domain: null,
  _events: {},
  _maxListeners: 10,
  _read: [Function] }

【问题讨论】:

    标签: node.js qr-code ejs embedded-javascript


    【解决方案1】:

    您正在尝试将渲染图像填充到模板引擎中;它不会工作。

    您应该在模板中添加一个图片标签,该标签指向一个响应图片的 URL。

    //根据评论编辑

    router.get('/qr/:text', function(req,res){
       var code = qr.image(req.params.text, { type: 'png', ec_level: 'H', size: 10, margin: 0 });
       res.setHeader('Content-type', 'image/png');
       code.pipe(res);
    }
    

    然后在你的 html 模板中,制作一个图片标签,并将 src 设置为/qr/whatever text,你应该状态良好。

    【讨论】:

    • 谢谢,但我不知道“如何”。插件中没有获取图片url的选项。
    • @Paul 我没有看到您建议的代码将图像放置在 html id="qr" 的位置。我无法想象改变管道解决方案的方式来做到这一点。如果我使用 src= 设置图像标签,那么抓取图像应该是什么?我的代码几乎和 Morteza 的一样。
    • 我的示例路由器公开的 url 是 /qr/:text。如果您将图像 src 设置为该 URL,则服务器会将 QR 图像字节作为 png 发送,并且浏览器将呈现它。
    • 嗯,这是真的。但是二维码不会单独出现在屏幕上吗?这足以用于演示目的,但如果还显示上下文屏幕信息,您将需要使用 id 选择器指定 QR 码的位置。我看不出如何编码该结果。你有什么可以分享的吗?
    • 它将显示在您分配给它的任何 img 标签中。您不需要使用选择器来放置它。只需将 img 标签放在您想要的位置并设置 src。也许我不明白你的问题?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-15
    • 1970-01-01
    • 1970-01-01
    • 2016-08-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多