从Web服务收到的Base64图像数据不起作用

时间:2017-04-12 11:47:37

标签: jquery ajax web-services base64

...即使它在控制台看起来很好。 测试webservice - mashape - 并且应该在base64数据流中接收图像。当我在控制台(FF)中检查响应时,它看起来很好:显示图像。但是在控制台中跟踪相同的数据流会显示很多"无效字符" (不是Base64)。而且图像只是很多字符(不是图像)。当我试图获得它时,似乎对数据流进行了一些编码。我试图获取原始数据"但不知道如何。

我想这不是关于编码/解码base64图像?数据流应该已经是base64编码的。也许更多的是以原始格式保存base64数据?还是一个mimetype?要么?救命!

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "https://ronreiter-meme-generator.p.mashape.com/meme?top=suk",
        headers: { "X-Mashape-Key": "my secret key ;-)" },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        // mimeType: "text/plain; charset=x-user-defined",
        dataType: "text", //  html or json or xml

        success: function (data) {
            console.log(data);
            var src = "data:image/jpeg;charset=utf-8;base64, " + data;
            //var src = "data:image/jpeg;base64, " + data;
            $("output").html("<img src='" + src + "' alt='' />");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) { ...

enter image description here

OBS!更新...感谢this stackoverflow-post,我发现,这个简单的JavaScript代码将解决问题。它像jQuery一样接缝ajax没有可能添加xhr.responseType =&#39; blob&#39; - 这就是我在jQuery解决方案中缺少的。

是否有一种方法可以解决问题(将图像作为blob获取),如初始问题中所提到的那样使用jQuery ajax?

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var res = this.response;
        var reader = new window.FileReader();
        reader.readAsDataURL(res);
        reader.onloadend = function () {
            //done(reader.result.split('base64,')[1]);
            alert(reader.result);
            document.querySelector("output").innerHTML = "<img src='" + reader.result + "' />";
        }
    }
}
xhr.open("Get", "https://ronreiter-meme-generator.p.mashape.com/meme?top=suk");
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-Mashape-Key', 'still a secret :-)');
xhr.send();
xhr.responseType = 'blob';
xhr.send();

0 个答案:

没有答案