如何使用 javascript 将 png 转换为 base64 字符串？

Question

我尝试了几种不同的选择，其中很多我都忘记了。我正在发出 AJAX 请求，响应为Content-Type: image/png，内容为实际图像。

我非常希望显示图像，但似乎没有什么能按我想要的方式工作：

// imgdata contains a string that looks like this: "�PNG..."
var img = document.createElement('img');

// no good
img.src = 'data:image/png;base64,' + btoa(unescape(encodeURIComponent(data)));

// also no good
img.src = 'data:image/png;base64,' + btoa(encodeURIComponent(data));

// also no good
img.src = 'data:image/png;base64,' + btoa($.map(d, function(x){ return x.charCodeAt(0); }))

我尝试了其他一些方法，但仍然没有骰子。

在 Javascript 中是否有任何简单（甚至复杂）的方法可以做到这一点？

Answer 1

这不是用base64 而是用blob 完成的，但你会得到完全相同的结果：

var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if (this.readyState == 4 && this.status == 200){
            var img = document.getElementById('image');
            var url = window.URL || window.webkitURL;
            img.src = url.createObjectURL(this.response);
        }
    }
    // Relative path because : 
    // No 'Access-Control-Allow-Origin' header is present...
    xhr.open('GET', '/img/logo.png');
    xhr.responseType = 'blob';
    xhr.send();

在这里演示：http://jsfiddle.net/sparkup/sp4cukee/

Answer 2

如果您通过 node.js 或 PHP 提供此文件，您始终可以将文件写入服务器端临时位置的磁盘，提供它，然后立即将其删除。

var tempFile = 'path/to/file.jpg';

// Write the file to disk
fs.writeFile(tempFile, base64versionOfPhoto, function (err) {
    if (err) {
        res.header("Content-Type","application/json");
        return res.send(JSON.stringify(err));   
    } else {
        // Pipe the jpg to the user
        res.header("Content-Type","image/jpeg");

        var readStream = fs.createReadStream(tempFile);
        readStream.pipe(res, {end: false});

        readStream.on("end", function () {
            res.end();

            // Delete the file
            fs.unlink(tempFile, function (err) {
                if (err) console.log(err);
            });
        });
    }
});