从jQueryajax请求中获取图像数据，并将其显示在img标记中

Question

我使用的是dezgo api，每当我得到响应时，我都想将其显示在图像标记中。这是我的代码：

const settings = {
"async": true,
"crossDomain": true,
"url": "https://dezgo.p.rapidapi.com/text2image",
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded",
"X-RapidAPI-Key": "#####################",
"X-RapidAPI-Host": "dezgo.p.rapidapi.com"
},
"data": {
"steps": "10",
"guidance": "-20",
"width": "512",
"prompt": "an insect",
"height": "512"
}
};
$.ajax(settings).done(function (response) {

console.log(response);
var img = $('<img id="dynamic">');
img.attr('src', "data:image/png;base64," + response);
img.appendTo('#imgcontainer');
});

但我最终得到了这样一个img：

<img id＝"；动态的"；src="；数据：图像/p�PNG-

����IHDR�������������{�C�����IDATx�<��dK�߉������g���7.�2年$�"�d��Z���ѣ�我��B�B�[���"�*o��F����`fk������p〃；����｛o���~���������Q-�si�^$Q�5.����_���@"�__������v������Vۛ��% ��<�Hß�8.���o���y�[�<����7.�˺�U����xwwLi����w_｝�

它似乎没有对数据进行编码。

编辑：我使用IT高盛的建议修改了这个

// var response = fake_api_result();
var prefix = 'data:image/png;base64,'
// document.querySelector("#img").src = prefix + btoa(response)

function fake_api_result(data) {
var base64 = data;
return atob(base64)
}
function encodeAndDisplayResult(data){
var unencoded = fake_api_result(data);
var encoded = btoa(unencoded);
var img = $('<img id="dynamic">');
img.attr('src', prefix + encoded);
img.appendTo('#imgcontainer');
}

const settings = {
"async": true,
"crossDomain": true,
"url": "https://dezgo.p.rapidapi.com/text2image",
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded",
"X-RapidAPI-Key": "####################",
"X-RapidAPI-Host": "dezgo.p.rapidapi.com"
},
"data": {
"steps": "10",
"guidance": "-20",
"width": "512",
"prompt": "an insect",
"height": "512"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
encodeAndDisplayResult(response);

});

现在它说："；未捕获的DOMException：字符串包含无效字符">

Answer 1

在您的情况下，您不需要fake_api_result函数。你可以试试这个

var prefix = 'data:image/png;base64,'
function encodeAndDisplayResult(data){
var encoded = btoa(data);
var img = $('<img id="dynamic">');
img.attr('src', prefix + encoded);
img.appendTo('#imgcontainer');
}

const settings = {
"async": true,
"crossDomain": true,
"url": "https://dezgo.p.rapidapi.com/text2image",
"method": "POST",
"headers": {
"content-type": "application/x-www-form-urlencoded",
"X-RapidAPI-Key": "####################",
"X-RapidAPI-Host": "dezgo.p.rapidapi.com"
},
"data": {
"steps": "10",
"guidance": "-20",
"width": "512",
"prompt": "an insect",
"height": "512"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
encodeAndDisplayResult(response);

});

Answer 2

它看起来像一个原始的PNG数据。我认为这是一个二进制文件，所以您需要将其转换为base64，并将其直接用作图像的src。或者，也许是某种读者idk。让我们试试

var response = fake_api_result();
var prefix = 'data:image/png;base64,'
document.querySelector("#img").src = prefix + btoa(response)

function fake_api_result() {
var base64 = `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`
return atob(base64)
}

<img id="img">

在您的情况下，您的代码应该看起来像并有望工作：

$.ajax(settings).done(function (response) {

var base64 = btoa(response)
var img = $('<img id="dynamic">');
img.attr('src', "data:image/png;base64," + base64);
img.appendTo('#imgcontainer');
});