Отображение изображения в HTML из GridFS

Question

Я загружаю изображение в GridFS, но не знаю, как отобразить это в <img > тег.

Я попробовал следующий код:

conn.once('open', function () {
    var gfs = Grid(conn.db, mongoose.mongo);
    gfs.files.find({ filename: 'img1.png' }).toArray(function (err, files) {
        if (err) { console.log(err); }
        console.log(files);
    });
});

Я получаю результат:

[ { _id: 5316f8b3840ccc8c2600003c,
    filename: 'img1.png',
    contentType: 'binary/octet-stream',
    length: 153017,
    chunkSize: 262144,
    uploadDate: Wed Mar 05 2014 15:43:07 GMT+0530 (India Standard Time),
    aliases: null,
    metadata: null,
    md5: '915c5e41a6d0a410128b3c047470e9e3' } ]

Теперь это просто информация о файле, а не фактические данные файла.

Как отобразить изображение в HTML?

Answer 1

Вы должны определить тип содержимого для ответа, и с помощью соединения с БД вы можете получить данные. Проверьте следующий пример, чтобы получить представление:

app.get('/filelist', function(req, res) {
    var collection = db.collection('DbCollectionName');
    var da = collection.find().toArray(function(err, items) {
        console.log(items[0]);
        res.writeHead(200, {'Content-Type': 'image/png'});
        res.end(items[1].dbfileName.buffer, 'binary');
    });
});

Редактировать:

Поэтому, когда вы хотите установить изображение в качестве источника, вы можете преобразовать двоичные данные изображения (извлеченные из базы данных) в формат base64.

var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data'); //JS have btoa() function for it.
document.body.appendChild(img);

или вы можете использовать hex to base64 также, если ваше изображение не поддерживает выше

function hexToBase64(str) {
return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" ")));
}

и называть это как

img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data');