0

i used the answer of this question Nodejs - How to show qr-image result in view

server-side i got:

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

router.get('/qrimage/:text', function(req,res){
  var code = qr.image(req.params.text, { type: 'png'});
  res.setHeader('Content-type', 'image/png');
  res.pipe(code);
  res.end();
});

client-side with jQuery:

var thisUserName = 'bobby';
$.get('/users/qrimage/'+ thisUserName);
var img = $("<img />").attr('src', 'users/qrimage/'+ thisUserName).load(function() {
        $("#qrim").replaceWith(img);
});

the client-side code will be executed, when you click on a link. My problem is that the browser gets something but the image is not displayed properly.

console on click:

GET /users/qrimage/bobby 200 67.484 ms - -
Community
  • 1
  • 1
Chris
  • 35
  • 6

2 Answers2

1

qr.image() returns a Readable stream. You're trying to pipe your response to it instead of the other way around. Try this:

router.get('/qrimage/:text', function(req,res){
  var code = qr.image(req.params.text, { type: 'png'});
  res.setHeader('Content-Type', 'image/png');
  code.pipe(res);
});
mscdex
  • 104,356
  • 15
  • 192
  • 153
0

You need to move the DOM manipulation code into a done block after you run $.get().

var thisUserName = 'bobby';
$.get('/users/qrimage/'+ thisUserName)
.done(function(data) {  
  // data will be the result of the server code.
})
.fail(function() {
  // something went wrong
});

Also, as mscdex pointed out, you've got your pipe and stream log backwards.

arb
  • 7,753
  • 7
  • 31
  • 66
  • how can i display the image in the done block with the data variable? – Chris May 26 '15 at 14:27
  • You'll have to create a new image and set it's src attribute to the result assuming the result is base64 string. – arb May 26 '15 at 15:06