Javascript 使用 POST 获取 gif 并显示

Question

我正在搜索许多其他完全相同的问题。但是在我的情况下无法让它们中的任何一个工作。

基本上我需要的是从 API 中获取一个 gif 文件并显示它。返回的图片是如下图构建的base64编码的gif图片；

with io.BytesIO() as newfp:
    ....logic....
    buf = base64.b64encode(newfp.getvalue()).decode()
    return {
        "statusCode": 200,
        "headers": {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers": "Content-Type",
            "Content-Type": 'image/gif',
        },
        "body": buf,
        "isBase64Encoded": True,
    }

我根据这个link,

得出的结果如下图

fetch('https://xxxxxxx.execute-api.us-west-2.amazonaws.com/v1/xxxx', {
    method: 'POST',
    body: ""
  }).then((response) => {
  response.arrayBuffer().then((buffer) => {
    var base64Flag = 'data:image/gif;base64,';
    var imageStr = arrayBufferToBase64(buffer);
        var image = new Image();
    image.src = base64Flag + imageStr;
    document.body.appendChild(image);
  });
});

function arrayBufferToBase64(buffer) {
    console.log(buffer);
  var binary = '';
  var bytes = [].slice.call(new Uint8Array(buffer));

  bytes.forEach((b) => binary += String.fromCharCode(b));

  return window.btoa(binary);
};

Answer 1

使用以下代码解决了问题。

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://xxxxx.execute-api.us-west-2.amazonaws.com/v1/xxxx");
xhr.responseType = "blob";
xhr.onload = response;
xhr.send();

function response(e) {
  (this.response.text().then(imageStr => {
    var base64Flag = 'data:image/gif;base64,';
    var image = new Image();
    image.src = base64Flag + imageStr;
    document.body.appendChild(image);
  }));
}

Javascript 使用 POST 获取 gif 并显示

Javascript fetch gif using POST and display

javascript

python-3.x

fetch-api