[英]Nodejs serve base64 as Image
I am trying to serve a base64 string as an image with image/png
headers.我正在尝试将 base64 字符串作为带有
image/png
标头的图像提供。 The headers are being set properly but the images are not being shown all I can see is a blank screen.标题设置正确,但没有显示图像,我只能看到一个空白屏幕。 here is the code:
这是代码:
request('someCustomLink', function (error, response, body) {
// someCustomLink gives the base64 string
var img = new Buffer(body, 'base64');
res.writeHead(200, {
'Content-Type': 'image/png',
'Content-Length': img.length
});
res.end(img);
});
this is the link that I followed to arrive at this solution. 这是我为达到此解决方案而遵循的链接。
Any help will be appreciated.任何帮助将不胜感激。
EDIT Here are the response headers from my someCustomLink (it might help in understanding the problem betr)编辑这是我的 someCustomLink 的响应标头(它可能有助于理解问题 betr)
Accept-Ranges:bytes
Content-Length:128778
Content-Type:image-jpeg
Date:Thu, 21 Dec 2017 06:03:52 GMT
ETag:"edc04d469779108860478b361b7427d7"
Last-Modified:Mon, 11 Dec 2017 08:54:32 GMT
Server:AmazonS3
x-amz-id-2:QlR39g0vC5CeOo6fdKzX9uFB+uiOtj61c0LKW2rQLcCPWllcKyfbpg93Yido+vZfzMzB3lmhbNQ=
x-amz-request-id:3EC77634D9A05371
This is the get req这是获取请求
var request = require('request').defaults({ encoding: null });
app.get('/thumb/:thumbLink', function(req, res) {
request('https://s3.amazonaws.com/my-trybucket/projectImages/'+req.params.thumbLink, function (error, response, body) {
//console.log('error:', error); // Print the error if one occurred
//console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
//console.log('body:', body); // Print the HTML for the Google homepage.
var img = new Buffer(body, 'base64');
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.end(img);
});
});
-Thanks -谢谢
The response that you are getting contains data:image/png;base64,
.您收到的响应包含
data:image/png;base64,
。 You have remove this before creating the Buffer
.在创建
Buffer
之前,您已将其删除。 See example below请参阅下面的示例
request('https://s3.amazonaws.com/my-trybucket/projectImages/e31492f7314837a22a64395eee7cedfd', function(error, response, body) {
var img = new Buffer(body.split(',')[1], 'base64');
res.writeHead(200, {
'Content-Type': 'image/png',
'Content-Length': img.length
});
res.end(img);
})
Was stuck for long on this particular issue too only to find out that sending the actual data Body that comes back from s3 is actually sufficient to display the image.在这个特定问题上也停留了很长时间,只是发现发送从 s3 返回的实际数据 Body 实际上足以显示图像。 Here's my implementation (in typescript):
这是我的实现(在打字稿中):
// a method in my Bucket class
async getObject(key: string) {
const params = {
Bucket: this.bucket, //my bucket name set in my constructor
Key: key,
};
return new Promise((resolve, reject) => {
s3.getObject(params, (err, data) => {
if (err) reject(err);
if(data) resolve(data.Body);
});
});
}
// the get request route
app.get(
"url/:folder/:id",
async (req: Request, res: Response) => {
const { folder, id } = req.params;
const image = (await new Bucket().getObject(`${folder}/${id}`)) as Buffer;
res.send(image);
}
);
I got the error ECONNRESET
on my server.我在我的服务器上收到错误
ECONNRESET
。 It turned out that res.end()
was responsible for it.原来
res.end()
对此负责。 I replaced it with res.send()
and the transfer went without problems.我用
res.send()
替换了它,传输没有问题。 Here is my generic solution for serving base64 files这是我提供 base64 文件的通用解决方案
async (req: Request, res: Response) => {
const { id } = req.params;
//Get the image or file with your own method
const base64File = await GetBase64File(id)
const [fileInfo, fileData] = base64File.split(",");
const contentType = fileInfo.split(";")[0].replace("data:", "");
res.setHeader("Content-Type", contentType);
res.setHeader("Content-Length", fileData.length);
const buffer = Buffer.from(fileData, "base64");
res.send(buffer);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.