Nodejs - Как показать результат qr-изображения в представлении

Я использую плагин qr-image для Nodejs для создания QR-кода, и он работает очень хорошо.

Проблема заключается в отображении изображения результата в 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(код) показывает это:

{ _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
person Morteza Ziyae    schedule 15.12.2014    source источник

Ответы (1)


arrow_upward
8
arrow_downward

Вы пытаетесь вставить отрендеренное изображение в механизм шаблонов; это не сработает.

Вместо этого вы должны иметь тег изображения в шаблоне, который указывает на 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, и вы должны быть в хорошей форме.

person Paul    schedule 15.12.2014
comment
Спасибо, но я не знаю "как". В плагине нет возможности получить URL-адрес изображения. - person Morteza Ziyae; 15.12.2014
comment
@Paul Я не вижу, что предложенный вами код помещает изображение в место html id=qr. Я не могу представить, как изменить ваше решение для трубы, чтобы сделать это. Если я установлю тег изображения с помощью src= , что должно быть, чтобы захватить изображение? Мой код практически такой же, как у Мортезы. - person Ric; 30.05.2016
comment
URL-адрес, который предоставляет мой пример маршрутизатора, — это /qr/:text. Если вы установите этот URL-адрес в качестве источника изображения, сервер отправит байты изображения QR в виде png, и браузер отобразит его. - person Paul; 30.05.2016
comment
Что ж, это правда. Но не будет ли QR-код на экране изолированно? Этого достаточно для демонстрационных целей, но там, где также представлена ​​контекстная экранная информация, вам нужно указать местоположение QR-кода с помощью селектора идентификатора. Я не понимаю, как закодировать этот результат. У вас есть ручка, которой вы могли бы поделиться? - person Ric; 30.05.2016
comment
Он будет отображаться в любом теге img, которому вы его назначите. Вам не нужно использовать селектор, чтобы разместить его. Просто поместите тег img туда, куда вы хотите, и установите src. Может я не понимаю вашего вопроса? - person Paul; 30.05.2016
comment
@Paul Мне потребовалось некоторое время, чтобы понять, что здесь происходит. Теперь я понимаю. В Chrome на вкладке «Элементы» я вижу, что каждый раз, когда я помещаю курсор на ссылку src=, он активирует маршрут «Получить». Это очень круто. У меня есть операторы журнала в маршруте Get, и они печатаются каждый раз. Однако проклятое qr-изображение, которое не выдает ошибку, не доставляет QR-код на страницу. :( Разочаровывает. Есть идеи? Спасибо. - person Ric; 31.05.2016
comment
Да извини. У меня была последняя строка задом наперед. qr-image создает читаемый поток, поэтому вам нужно передать его в res, а не наоборот. - person Paul; 31.05.2016
comment
@ Пол Вот так! Заставить реальный код работать очень важно. В начале это решение было просто не интуитивно понятным для меня. Так что это также подтолкнуло мои знания вперед. Я благодарен. Интересно, что первые 3 человека, поставившие + за ваше решение, ни разу не упомянули о проблемах с исходным кодом. Я, должно быть, единственный здесь, кто действительно добавил это в приложение! - person Ric; 31.05.2016
comment
Привет, я все еще немного запутался, у меня есть URL /api/v1/qrcode/generator, и я отправляю несколько параметров, с которыми генерируется qrcode. Как отправить qrcode обратно? - person Vikranth; 13.07.2019