ES 2015 Blobs и как эффективно хранить данные

Недавно я работал над веб-приложением для удаленной белой доски и видеочата. Обычно я бы использовал сервис AWS S3. Но у меня уже была создана база данных MLabs, и у меня не было тонны информации о файлах для хранения, но у меня было достаточно. Я сохранял данные с холста размером 2000 на 2000 пикселей. Необработанные данные контекста были пустыми или заполненными отдельными цветами, размером около 60 МБ. Это было проблемой.

Я начал искать более эффективные способы хранения данных холста и фактически закончил тем, что сначала написал собственный алгоритм сжатия холста. Это сработало очень хорошо, но не очень быстро. Так что мне пришлось продолжать поиски.

В конце концов я наткнулся на новую функцию ES2015, которую еще не видел. Blobs. Я был шокирован, Javascript не был языком, предназначенным для обработки двоичных данных или буферных потоков. В итоге я преобразовал этот файл размером 60 МБ в объект blob или буферный поток и сохранил его размером около 200 КБ.

Итак, что такое BLOB-объекты и как их можно использовать для эффективного хранения файлов и данных?

BLOB-объекты - это объекты, но они не выглядят и не ведут себя как обычные объекты Javascript.

canvas.toBlob((blob) => {
  socket.emit('save', { blob });
}

Если бы вы занесли в консоль журнал этого большого двоичного объекта, вы бы не увидели никакой информации, относящейся к холсту. Вы увидите ключ размера и ключ типа. Размер - это количество последовательных байтов в памяти, а тип - это тип данных, которые были сохранены. Данные фактически сохраняются в памяти как необработанные данные.

socket.on('recieve', (data) => {
  const bufferStream = data.canvas;
  const newBlob = new Blob([bufferStream], { type: 'image/png' });
  const image = new Image();
  image.addEventListener('load', () => {
    context.drawImage(image, 0, 0, 2000, 2000);
  });
  image.src = URL.createObjectURL(newBlob);
});

После получения ваших данных они фактически вернутся в виде строки base64, которую необходимо преобразовать обратно в большой двоичный объект. Тогда вы сможете справиться с этим любым удобным для вас способом. Эта методология позволила мне передавать меньше данных через сокет, хранить меньше информации в моей базе данных, а затем перерисовывать эти данные обратно на холст.