Nodejs - How to show qr-image result in view

Question

I use qr-image plugin for Nodejs to generate a QR code and it works pretty good.

The problem is showing result image in 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 });
});

When i uncomment last line, nodejs crashs. How to send code to view as a variable?

Update:

This code returns [object Object] in result page.

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 });

Also console.log(code) shows this:

{ _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] }

Paul · Accepted Answer · 2016-05-31T10:51:51.117

9

You're trying to stuff a rendered image into a template engine; it's not going to work.

You should instead have an image tag in the template that points to a URL that responds with the image.

// Edit based on comment

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);
}

Then in your html template, make an image tag with the src set to /qr/whatever text and you should be in good shape.

edited May 31 '16 at 10:51

answered Dec 15 '14 at 18:36

Paul

35,689
11
93
122

Thanks, but i don't know 'how'. There is no option in plugin to get image url. – Morteza Dec 15 '14 at 18:56
@Paul I don't see that your suggested code places the image at the location of the html id="qr". I can't visualize the way to change your pipe solution to do that. If I set an image tag with the src= , what should it be to grab the image? My code is practically the same as Morteza's. – Ric May 30 '16 at 03:38
The url that my example router exposes is /qr/:text. If you set the image src to that URL, the server will send the QR image bytes as a png and the browser will render it. – Paul May 30 '16 at 05:18
Well, that is true. But won't the QR Code be on the screen in isolation? That suffices for demo purposes but where there is contextual screen information presented too, you will want to specify the location of the QR Code by use of an id selector. I can't see how to code that outcome. Do you have a handle on that you could share? – Ric May 30 '16 at 07:35
It's going to show up in whatever img tag you assign it to. You don't need to use a selector to place it. Just put the img tag where you want it and set the src. Maybe I'm not understanding your question? – Paul May 30 '16 at 16:51
@Paul It took me a while to get my head around what was going on here. I understand now. In Chrome, in the Elements tab, I can see that every time I place the cursor over the src= link it activates the Get route. That is very cool. I have log statements in the Get route and they print each time. However, the darn qr-image, which does not produce an error, is not delivering a QR Code to the page. :( Frustrating. Any ideas? Thx. – Ric May 31 '16 at 06:14
Yeah, sorry. I had the last line backwards. qr-image produces a readable stream, so you have to pipe that to res, not the other way around. – Paul May 31 '16 at 10:52
@Paul That's it! Getting real code working is very important. At the beginning this solution was just not intuitive for me. So it has also pushed my knowledge forward. I am grateful. It's interesting that the first 3 people who had +'d your solution never mentioned the issues with the original code. I must be the only one here who actually dropped it into an app! – Ric May 31 '16 at 19:46
Hello, I am still a bit confused, I have a url /api/v1/qrcode/generator and I send a few parameters with which the qrcode is generated. How do I send the qrcode back? – Vikranth Jul 13 '19 at 18:26

Nodejs - How to show qr-image result in view

1 Answers1

Linked