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

我试过几种不同的选择，很多我都忘了。我正在发出一个AJAX请求，响应是

内容类型：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中有什么简单（甚至复杂）的方法可以做到这一点吗？

如果您通过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);
            });
        });
    }
});

---

这不是使用

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();

---

此处演示：

注意，它不一定是node.js或PHP，这些都是示例。我提供的代码是node.js btwHmmm。这可能是一个解决办法。我使用的是Java，呃，或者我只是转换一下服务器端的东西。我在尝试显示来自LDAP服务器的照片时遇到了这个问题，这些照片都在base64中。在像您这样多次尝试之后，我发现最好的方法是让服务器“创建”文件，使其足够长，以便提供给客户端。您肯定能够从Java中执行类似的操作。这里已经提出了这个问题：这里@Sparkup涉及的canvas元素不仅仅是Javascript。对我来说，这是个好消息。如果您必须支持8（或更早版本），则该解决方案将无法工作。另一个解决方案似乎是使用

toData

文件读取器，这一点支持得更差。好的，似乎还没有回答，非常抱歉。然而，我通过添加一个答案使自己变得有用：）