Блог

Главная - Вопросы по программированию - Javascript извлекает gif с помощью записи и отображения

Javascript извлекает gif с помощью записи и отображения

#javascript #python-3.x #fetch-api

Вопрос:

Я просматривал множество других вопросов, задавая точно такие же вопросы. Но не смог заставить ни одного из них работать в моем случае.

В основном мне нужно извлечь gif-файл из API и отобразить его. Возвращаемое изображение представляет собой gif-изображение в кодировке base64, созданное, как показано ниже;

 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,
    }

То, что я придумал, как показано ниже, основано на этой ссылке,

 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);
};

Ответ №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);
  }));
}
Метки: