Блог

Итак, это проблема. У меня есть приложение типа социальных сетей, в котором пользователи постоянно загружают изображения. Сейчас у него мало пользователей, но их число растет с каждым днем. Я использую пакет с именем blur hash для генерации хэшей (строк, представляющих размытую версию изображения), когда изображение загружается в хранилище firebase. Затем эти хэши загружаются в firebase rtdb или firestore.. Расходы на вариант использования, в то время как изображение сохраняется в хранилище firebase. Однако проблема заключается в том, что генерация этих хэшей является сложной задачей, и из-за этого приложение зависает примерно на 3 секунды для каждого изображения. Итак, если пользователь загружает 7 фотографий, это всего 21 секунда просто замороженного приложения. Даже индикатор загрузки перестает двигаться. Ничего, когда генерация хэша завершена, он возобновляет нормальную работу. Если изображений действительно много, приложение просто вылетает. На некоторых телефонах, у которых не так много оперативной памяти, приложение вылетает в тот момент, когда пользователь пытается загрузить изображения.

У меня есть идея сделать эту генерацию хэша на стороне сервера. Например, как это делает telegram. Или как это делает WhatsApp. Или средний. Я уверен, что они также делают это на стороне сервера. Но, похоже, я нигде не могу найти, как генерировать хэши размытия со стороны сервера.

Любая помощь, пожалуйста?

Пакет, который я использую для генерации хэшей размытия, — это этот.

https://pub.dev/packages/blurhash

И я использую пакет flutter_blur_ hash для загрузки хэшей и использования их в качестве изображений-заполнителей для реальных изображений. И это действительно выглядит очень красиво. Но проблема заключается в создании этих хэшей.

Используйте пакет узлов blurhash в вашей функции firebase. Вот пример функции.

 const functions = require('firebase-functions');
const crypto = require('crypto');
const path = require('path');
const os = require('os');
const { Canvas } = require('canvas');
const { loadImage } = require('canvas');
const blurH = require("blurhash");

exports.generateHash = functions.storage.bucket().object().onFinalize( async(uploadedObject) => {
const filePath = uploadedObject.name;
const bucket = admin.storage().bucket();
const file = bucket.file(filePath);

const randomFileName = crypto.randomBytes(20).toString('hex')   path.extname(filePath);
const tempLocalFile = path.join(os.tmpdir(), randomFileName);
  
await bucket.file(filePath).download({destination: tempLocalFile});

const imageWidth = 1000;
const imageHeight = 1000;

const canvas = new Canvas(imageWidth, imageHeight);
const context = canvas.getContext('2d');
const myImg = await loadImage(tempLocalFile);
context.drawImage(myImg, 0, 0);
const imageData = context.getImageData(0, 0, imageWidth, imageHeight);
const hash = blurH.encode(imageData.data, imageWidth, imageHeight, 5, 5);
});
  

Мы предположили, что ширина и высота изображения равны 1000 для каждого, но для получения лучших результатов извлеките размеры из метаданных изображения и используйте их вместо этого. Вы можете использовать ImageMagick, как показано в этом примере функции firebase

Альтернативой этому было бы отправить изображение в службу размытия и позволить им сделать это за вас!

 const functions = require('firebase-functions');
const crypto = require('crypto');
const path = require('path');
const os = require('os');
const blurhash = require('blurhash_service');

blurhash.config({ apiKey: 'YOUR_API_KEY' });

exports.generateHash = functions.storage.bucket().object().onFinalize( async(uploadedObject) => {
  const filePath = uploadedObject.name;
  const bucket = admin.storage().bucket();
  const file = bucket.file(filePath);

  const randomFileName = crypto.randomBytes(20).toString('hex')   path.extname(filePath);
  const tempLocalFile = path.join(os.tmpdir(), randomFileName);

  await bucket.file(filePath).download({destination: tempLocalFile});

  const { data } = await blurhash.convertImageToHash({
    'pathToImage': filePath,
    'quality':     2,
  });

  console.log(data);
});

// example output
// {
//   message: 'Success',
//   id: '5a298b61-bcfa-4b3a-a647-b984e6e04364',
//   hash: 'AQI|Z}$%~Toy'
// }
  

Полное раскрытие, я разработчик blur-hash.com . Вы можете бесплатно зарегистрироваться на веб-сайте или связаться со мной, и я могу
отправить вам пробный ключ api 🙂