Разобрать буферное изображение до base64 на React Native - PullRequest
Новая
       28

Разобрать буферное изображение до base64 на React Native

0 голосов
/ 27 мая 2020

Я пытаюсь показать изображение, полученное с сервера, в приложении React Native. То, что я получаю в ответе, выглядит так:

enter image description here

Я попытался создать объект Buffer, используя buffer , а затем проанализировать to base64 

const imageBuffer = Buffer.from(JSON.stringify(res.data)) // This res.data is the whole object, including the type "Buffer" and the data array
const imageBase64 = imageBuffer.toString('base64')
setImage(imageBase64)

Это возвращает изображение base64, но оно не отображается с использованием компонента React Native Image 

<Image source={{ uri: `data:image/jpeg;base64,${image}` }} />

Я не нашел, как обрабатывать изображения с этой структурой ( буфер в виде массива чисел) на React Native. Я думал, что, возможно, это способ сделать это без упомянутой библиотеки или без синтаксического анализа буфера до base64, но я не знаю.

Спасибо

1 Ответ

1 голос
/ 31 мая 2020

Я не вижу ширины и высоты вашего изображения, это первая распространенная проблема, с которой я столкнулся и потратил весь день впустую после предоставления ширины и высоты, даже если изображение не отображается, см. Решение ниже

Я использовал эту функцию для преобразования BufferArray в Base64

источник ссылка 

  arrayBufferToBase64 = buffer => {
    let binary = '';
    let bytes = new Uint8Array(buffer);
    let len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
  };

Я использовал указанную выше функцию, например, 

              <Image
                style={{
                  width: 200,
                  height: 200,
                  resizeMode: 'cover',
                  backgroundColor: 'red',
                }}
                source={{
                  uri:
                    'data:image/jpeg;base64,' +
                    this.arrayBufferToBase64(data.data), //data.data in your case
                }}
              />
...