Итак, у меня есть некоторые изображения, и я мог бы успешно применить к ним эффекты, используя плагин CamanJS. Но теперь я хочу сохранить эти измененные изображения и заменить их оригинальным.
Документация (ссылка) Предоставляет информацию о сохранении изображений. но это рассматривается как подсказка для загрузки. Я хочу, чтобы изображения сохранялись на сервере без подсказки и по нажатию кнопки "Сохранить".
В документации также говорится о кодировке base64, которую я не понимаю. Могла ли моя проблема быть решена? благодарю!.
CamanJS имеет встроенную функцию, которая поможет вам получить представление Base64 изображения. Вы можете отправить это серверу через Ajax, декодировать строку base64 и сохранить его как нормальное изображение.
Caman("#my-image", function () {
this.brightness(10);
this.render(function () {
var image = this.toBase64();
saveToServer(image); // your ajax function
});
});
Как вы можете видеть в этом ответе: fooobar.com/questions/3994/... вы можете получить представление изображения base64 с помощью <canvas> и функции toDataURL().
Когда вы получаете строку base64, вы можете использовать AJAX для отправки изображения на сервер (вы можете использовать методы jQuery $.ajax или $.post), а затем на сервере вы можете декодировать строку base64 на изображение и сохранять Это.
Или вместо отправки версии 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")