Node.js base64 对下载的图像进行编码以在数据 URI 中使用答案

【问题标题】：Node.js base64 encode a downloaded image for use in data URINode.js base64 对下载的图像进行编码以在数据 URI 中使用
【发布时间】：2010-09-14 13:40:07
【问题描述】：

使用 Node v0.2.0 我正在尝试从服务器获取图像，将其转换为 base64 字符串，然后将其嵌入到图像标签中的页面上。我有以下代码：

var express = require('express'),
request = require('request'),
sys = require('sys');

var app = express.createServer(
    express.logger(),
    express.bodyDecoder()
);

app.get('/', function(req, res){

    if(req.param("url")) {
        var url = unescape(req.param("url"));
        request({uri:url}, function (error, response, body) {
          if (!error && response.statusCode == 200) {

                var data_uri_prefix = "data:" + response.headers["content-type"] + ";base64,";
                var buf = new Buffer(body);
                var image = buf.toString('base64');

                image = data_uri_prefix + image;

                res.send('<img src="'+image+'"/>');

          }
        });
    }
});

app.listen(3000);

注意：此代码需要“express”和“request”。当然，node。如果你已经安装了 npm，它应该像“npm install express”或“npm install request”一样简单。

很遗憾，这并没有按预期工作。如果我使用Google logo 进行转换，那么我会在字符串的开头得到以下内容：

77+9UE5HDQoaCgAAAA1JSERSAAABEwAAAF8IAwAAAO+/ve+/ve+/vSkAAAMAUExURQBzCw5xGiNmK0t+U++/vQUf77+9BiHvv70WKO+/vQkk77+9D

但是，如果我使用具有相同图像的在线Base64 encoder，那么它可以完美运行。字符串开头是这样的：

iVBORw0KGgoAAAANSUhEUgAAARMAAABfCAMAAAD8mtMpAAADAFBMVEUAcwsOcRojZitLflOWBR+aBiGQFiipCSS8DCm1Cya1FiyNKzexKTjDDSrLDS

我哪里出错了，这不能正常工作？我尝试了很多不同的 js base64 实现，但它们的工作方式都不一样。我唯一能想到的就是我试图将错误的东西转换成base64，但是如果是这种情况我应该转换什么？

【问题讨论】：

标签： javascript image node.js base64

【解决方案1】：

问题是在 javascript 字符串中编码和存储二进制数据。在 http://nodejs.org/api.html 的 Buffers 下有一个很好的部分。

不幸的是，解决此问题的最简单方法是更改请求 npm。我必须在 /path/to/lib/node/.npm/request/active/package/lib/main.js 中 var buffer; 下方的第 66 行添加 response.setEncoding('binary');。这将适用于此请求，但不适用于其他请求。您可能想要破解它，以便仅根据其他传递的选项进行设置。

然后我将var buf = new Buffer(body) 更改为var buf = new Buffer(body, 'binary');。之后，一切正常。

如果你真的不想接触请求 npm，另一种方法是在 responseBodyStream 参数中传入一个实现 Writable Stream 的对象到 request.然后，该对象会将来自响应的流数据存储在它自己的缓冲区中。也许有一个图书馆已经这样做了……我不确定。

我暂时将其留在这里，但如果您希望我澄清任何事情，请随时发表评论。

编辑

查看 cmets。 http://gist.github.com/583836的新解决方案

【讨论】：

谢谢，这确实有效，但我不太喜欢编辑请求包以使其工作的想法。您将如何实现 Writable Stream 对象？我不知道如何创建一个。任何帮助将不胜感激！
在github.com/substack/node-bufferlist 找到了一个不错的可写流实现。下面是不需要修改请求库的代码更新版本：gist.github.com/583836.
对不起，我分心了。它确实有效，并且完全符合我的要求。感谢您的帮助！
感谢分享。从那时起，Request 包添加了一个“编码”选项。将其值设置为 'binary' 以获得相同的效果： request({uri : url,encoding : 'binary'}, function (error, response, body) { ... });

【解决方案2】：

以下代码（可在https://gist.github.com/804225 获得）

var URL = require('url'),
    sURL = 'http://nodejs.org/logo.png',
    oURL = URL.parse(sURL),
    http = require('http'),
    client = http.createClient(80, oURL.hostname),
    request = client.request('GET', oURL.pathname, {'host': oURL.hostname})
;

request.end();
request.on('response', function (response)
{
    var type = response.headers["content-type"],
        prefix = "data:" + type + ";base64,",
        body = "";

    response.setEncoding('binary');
    response.on('end', function () {
        var base64 = new Buffer(body, 'binary').toString('base64'),
            data = prefix + base64;
        console.log(data);
    });
    response.on('data', function (chunk) {
        if (response.statusCode == 200) body += chunk;
    });
});

还应该生成一个数据 URI，而不需要任何外部模块。

【讨论】：

【解决方案3】：

这适用于我使用请求：

const url = 'http://host/image.png';
request.get({url : url, encoding: null}, (err, res, body) => {
    if (!err) {
        const type = res.headers["content-type"];
        const prefix = "data:" + type + ";base64,";
        const base64 = body.toString('base64');
        const dataUri = prefix + base64;
    }
});

不需要任何中间缓冲区。关键是将encoding设置为null。

【讨论】：