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

How do I convert a png to a base64 string using javascript?

我尝试了几种不同的选择,但很多我都忘记了。我正在发出 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 中是否有任何简单(甚至复杂)的方法可以做到这一点?

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

此处演示:http://jsfiddle.net/sparkup/sp4cukee/