Сохранение изображений после их изменения плагином CamanJS

Итак, у меня есть некоторые изображения, и я мог бы успешно применить к ним эффекты, используя плагин CamanJS. Но теперь я хочу сохранить эти измененные изображения и заменить их оригинальным.

Документация (ссылка) Предоставляет информацию о сохранении изображений. но это рассматривается как подсказка для загрузки. Я хочу, чтобы изображения сохранялись на сервере без подсказки и по нажатию кнопки "Сохранить".

В документации также говорится о кодировке base64, которую я не понимаю. Могла ли моя проблема быть решена? благодарю!.

Ответ 1

CamanJS имеет встроенную функцию, которая поможет вам получить представление Base64 изображения. Вы можете отправить это серверу через Ajax, декодировать строку base64 и сохранить его как нормальное изображение.

Caman("#my-image", function () {
  this.brightness(10);
  this.render(function () {
    var image = this.toBase64();
    saveToServer(image); // your ajax function
  });
});

Ответ 2

Как вы можете видеть в этом ответе: fooobar.com/questions/3994/... вы можете получить представление изображения base64 с помощью <canvas> и функции toDataURL().

Когда вы получаете строку base64, вы можете использовать AJAX для отправки изображения на сервер (вы можете использовать методы jQuery $.ajax или $.post), а затем на сервере вы можете декодировать строку base64 на изображение и сохранять Это.

Ответ 3

Или вместо отправки версии Base64 на сервер и выполнения преобразования вы можете сделать то же самое на самом интерфейсе, а затем загрузить файл для замены своего изображения. Таким образом вам не нужно писать новую услугу для преобразования и замены. Получите данные Base64, как упоминалось в @Ryan, а затем используйте приведенную ниже функцию, чтобы преобразовать ее в File/Blob.

export const convertToBlob = (data, successCallBack, errorCallback) => {
  fetch(data)
  .then((res) => res.blob())
  .then((blob) => successCallBack(blob))
  .catch((err) => errorCallback(err))
}

export const successCallBack = (blob) => { uploadBlobToServer(blob) }

Если ваша служба принимает только объект File (а не объект Blob), просто преобразуйте Blob в файл, используя:

const imageFile = new File([blob], "imageFileName")