javascript - 如何使用 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/