Рендеринг изображений, хранящихся в Mongo (GridFS) с Node + Jade + Express - PullRequest
Новая
       13

Рендеринг изображений, хранящихся в Mongo (GridFS) с Node + Jade + Express

8 голосов
/ 23 марта 2012

У меня небольшой файл .png, хранящийся в Монго с использованием GridFS.Я хотел бы отобразить изображение в своем веб-браузере, используя Node + Express + Jade.Я могу получить изображение в порядке, например: 

FileRepository.prototype.getFile = function(callback,id) {
this.gs = new GridStore(this.db,id, 'r');
this.gs.open(callback);
};

, но я не знаю, как отобразить его с помощью Jade View Engine.Кажется, в документации нет никакой информации.

Может кто-нибудь указать мне правильное направление?

Спасибо!

Ответы [ 2 ]

16 голосов
/ 24 марта 2012

Я понял это (спасибо Тимоти!).Проблема заключалась в том, что я понимал все эти технологии и то, как они сочетаются друг с другом.Для всех, кто заинтересован в отображении изображений из MongoDB GridFS с использованием Node, Express и Jade ...

Мой документ в MongoDB содержит ссылку на изображение, хранящееся в GridFS, который представляет собой ObjectId, хранящийся в виде строки.например, MyEntity {ImageId: '4f6d39ab519b481eb4a5cf52'} <- NB: строковое представление ObjectId.Причина, по которой я сохранил ее в виде строки, заключалась в том, что сохранение ObjectId доставляло мне боль при маршрутизации, так как он рендерился как двоичный файл, и я не мог понять, как это исправить.(Может быть, кто-то может помочь здесь?).В любом случае, у меня есть решение ниже: </p>

FileRepository - Получить изображение из GridFS, я передаю String Id, который затем преобразую в BSON ObjectId (вы также можете получитьфайл по имени файла): 

FileRepository.prototype.getFile = function(callback,id) {
   var gs = new GridStore(this.db,new ObjectID(id), 'r');
   gs.open(function(err,gs){
      gs.read(callback);
   });
 };

Шаблон Jade - Визуализация HTML-разметки: 

img(src='/data/#{myentity.ImageId}')

App.JSfile - Маршрутизация (с использованием Express). Я установил маршрут '/ data /: imgtag' для динамических изображений: 

app.get('/data/:imgtag', function(req, res) {
  fileRepository.getFile( function(error,data) {
     res.writeHead('200', {'Content-Type': 'image/png'});
     res.end(data,'binary');
  }, req.params.imgtag );
});

И это помогло.Любые вопросы, дайте мне знать:)

8 голосов
/ 24 марта 2012

Я немного озадачен тем, что вы пытаетесь сделать здесь, поскольку Jade - это сжатый язык разметки для вывода текста (например, HTML), а не двоичного содержимого.

Поскольку вы используетеВозможно, у вас есть что-то вроде этого: 

app.get/'images/:imgtag', function(req, res) {
    res.render('image', {imgtag: req.params.imgtag);
});

Так попробуйте это: 

app.get/'images/:imgtag', function(req, res) {
    filerep.getFile( function(imgdata) {
        res.header({'Content_type': 'image/jpeg'})
        res.end(imgdata);
    }, req.params.imgtag );
});

Это отправит необработанный файл в ответ на HTTP-запрос с правильным типом mime.Если вы хотите использовать Jade для доставки шаблона (например, всплывающего окна с изображением), вы можете использовать другой маршрут для всплывающего окна или даже использовать data: uri и кодировать данные изображения на странице.

...