Как правильно форматировать base64 на сервере?

Question

[Boris009]

Как правильно работать с изображением, которое мы на клиенте переводим в base64 и передаем текстом на сервер
Но на сервере нам надо сжать его и так же в формате base64 сохранить уже сжатый вариант
Нашёл модуль, который работает с изображениями, но он выдает ошибки при попытке засунуть в него, как сам формат base64, так и без него путем замены строки в изображении

const image -> картинка в формате base64
const img = image.replace(/^data:image\/jpeg;base64,/, "")

const sh = await sharp(img).metadata()

https://sharp.pixelplumbing.com/api-output

Comments

[Надим]

input (Buffer | Uint8Array | Uint8ClampedArray | Int8Array | Uint16Array | Int16Array | Uint32Array | Int32Array | Float32Array | Float64Array | string )? if present, can be a Buffer / Uint8Array / Uint8ClampedArray containing JPEG, PNG, WebP, AVIF, GIF, SVG or TIFF image data, or a TypedArray containing raw pixel image data, or a String containing the filesystem path to an JPEG, PNG, WebP, AVIF, GIF, SVG or TIFF image file. JPEG, PNG, WebP, AVIF, GIF, SVG, TIFF or raw pixel image data can be streamed into the object when not present.

На вход надо подавать один из этих типов.

[Boris009]

Надим Закиров, а как base64 превратить в один из них?
И какой лучше получать на выходе, чтобы снова перевести в base64?

[Lynn «Кофеман»]

А зачем вообще нужен base64 на первом шаге?

[Boris009]

Lynn «Кофеман», обмен происходит в текстовом формате только

[Lynn «Кофеман»]

const img = Buffer.from(image.replace(/^data:image\/jpeg;base64,/, ''), 'base64');

[Boris009]

Lynn «Кофеман», спасибо, заработало

Answer 1

[VoidVolker]

Правильно работать так: передавать на сервер изображение в бинарном виде и без использования абсолютно бессмысленных конвертаций в base64 и обратно, а уже после получения изображения на сервере над ним проводить необходимые оптимизации, конвертации, сохранения и прочее.

Comments

[Boris009]

Так вышло, что я его получаю по апи

[VoidVolker]

Ну так и не надо тогда продолжать порочную практику - надо конвертировать в бинарный вид сразу и дальше работать с ним в таком виде. Тем более сохранять тоже надо в бинарном виде - современные форматы изображений поддерживают кучу разных методов сжатия изображения, при чем это методы созданы и оптимизированы под конкретные задачи. А еще лучше отправить авторам апи фича-рексвест на нормальную передачу изображения в бинарном виде.

[Boris009]

VoidVolker, это нельзя изменить к сожалению

const img = Buffer.from(image, 'base64').toString('utf-8')
await sharp(img).toBuffer()
Promise.reject:Input file is missing: u�Z�f�{��zڱ�����Error: Input file is missing: u�Z�f�{��zڱ�����

[VoidVolker]

Зачем в строку-то? Естественно он не найдет файл - это же не путь. Смотрите документацию шарпа и форматы, которые оно принимает. Какой смысл пытаться передать функции мусор не читая документации и надеяться на результат?

[Boris009]

VoidVolker, там написано много форматов или Buffer
Я получил буфер из бейс64, но он ругался на неправильность формата
После нашёл, что его переводят таким способом с кодировкой, но тоже не сработало

Я же не с нуля с вопросом пришёл
Попробовал, не получилось, решил на форуме узнать
И вроде все вокруг создают иллюзию легкости решения задачи, но никто не может написать ответ
Я вот вообще не могу вьехать, почему, уже все форумы с таким типом ошибок перелазил, но примером с бейс64 нет, но там и без бейс64 у людей такие ошибки вылетали

[VoidVolker]

Boris009 значит либо формат не тот, либо в процессе многократного конвертирования туда-сюда что-то пошло не так. Учитесь дебагу - это обязательный скилл для разработчика. У меня, к примеру, тот же самый шарп в реальном проекте прекрасно работает: фронт отправляет картинку на сервер в бинарном виде, далее сервер прогоняет через шарп и/или imagemagic и все отлично работает.