Как я могу изменить размер изображения перед загрузкой в firebase?

# #reactjs #firebase #blob

Вопрос:

У меня есть файлы для загрузки firebase reactjs . Файлы выглядят так: у них много свойств:

 [File {path: 'image1.jpg', index: 0, fName: 'imageBall1.jpg', type: 'jpg', …},
 File {path: 'image2.jpg', index: 1, fName: 'imageBall2.jpg', type: 'jpg', …}]

Я хочу изменить размер перед загрузкой, поэтому я сделал этот код

 export const resizeFile = async imageFiles => {
  return await imageFiles.map(async file => {
    const a =  await new Promise((resolve) => {
    Resizer.imageFileResizer(
      file,
      300,
      300,
      "JPEG",
      100,
      0,
      (uri) => {
        resolve(uri);
      },
      "base64"
    );
    });
    console.log('file', file, a)
    return a
  })
}

Но я получаю такой результат:

 Blob data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAAB

На который я не могу загрузить firebase , как я могу изменить размер изображения для загрузки firebase ? или мне следует снова преобразовать этот двоичный файл в изображение?

Я бы предпочел загружать в виде изображения, а не в двоичном формате

Ответ №1:

Вы можете удалить data:image/jpeg;base64, в своей строке base64. А затем вы используете .putString(image, 'base64', {contentType:'image/jpg'}); для загрузки в firebase.

Убедитесь, что вы должны {contentType:'image/jpg'} сообщить firebase тип файла.

Вы можете узнать больше здесь. https://firebase.google.com/docs/storage/web/upload-files#upload_from_a_string

1. Как я могу снова преобразовать этот двоичный файл в изображение?

2. @brunodia, Ты добавляешь это снова вот так. <img src="data:image/jpeg;base64,uploaded_base64_string_into_firebase"/>

3. @Tartarius могу ли я преобразовать изображение в изображение перед загрузкой?

4. @brunodia в принципе, вы не можете сделать это на reactjs/браузере/интерфейсе. Если вы все еще хотите снова преобразовать строку base64 в файл изображения, вам следует сделать это на своем сервере/серверной части, прежде чем загружать ее в firebase.

5. Нормально ли сжатие, которое я сделал, чтобы уменьшить размер изображения? есть ли лучший способ сделать это без преобразования в двоичные файлы?

Ответ №2:

То, что у вас есть,-это двоичное представление jpg в кодировке base-64. Обычно это нормально для отправки на сервер. Файлы изображений, как и все файлы, представляют собой просто двоичные файлы с определенными именами файлов или специальными заголовками, которые сигнализируют о том, как приложения-потребители должны их использовать. Множество приложений, включая веб-браузеры, могут использовать изображения в кодировке base-64. Смотрите здесь пример того, как отобразить строку base-64 в виде изображения. Я считаю, что если вы сохраните новый файл в firebase, содержимое которого является строкой base-64, вы сможете использовать полученный файл, как и любое другое изображение. На базе даже естьпример загрузки строки base-64 в их документации.