從GridFS以HTML格式顯示圖像

我正在GridFS中上傳圖像，但不知道如何在<img >標記中顯示此圖像。從GridFS以HTML格式顯示圖像

我嘗試下面的代碼：

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中顯示圖像？

來源

2014-03-05 Anup

您必須爲響應定義Content-Type，並使用db連接來獲取數據。請檢查下面的例子來得到一個想法：

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

編輯：

所以，當你想設置的圖像作爲源，可以將圖像（獲取來自DB）的二進制數據轉換爲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);

，或者您可以使用十六進制爲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');

來源

2014-03-05 11:38:21 yasmuru

沒有給出結果... u能告訴我如何讓這個'image'在'html'中顯示。 – Anup

我在我的項目中使用了這個代碼，並且測試了它。當你在mongo中使用gfs保存圖像時，它將被保存爲緩衝區，所以你可以使用dbconnection獲取它。將內容類型指定爲圖像後，您可以將該內容顯示爲響應 – yasmuru

您的代碼正常工作....我正努力在我的「html頁面」中顯示。 – Anup

從GridFS以HTML格式顯示圖像

回答

相關問題