Zapisywanie obrazów po ich zmianie przez wtyczkę CamanJS

Question

Mam kilka zdjęć i mogę z powodzeniem zastosować do nich efekty za pomocą wtyczki CamanJS. Ale teraz chcę zapisać te zmienione obrazy i zastąpić je oryginalnymi.

Dokumentacja (link) Zawiera informacje na temat zapisywania zdjęć. ale jest postrzegany jako monit o pobranie. Chcę, aby obrazy były zapisywane na serwerze bez pytania i kliknięcia przycisku "zapisz".

Dokumentacja mówi również coś o kodowaniu base64, którego nie rozumiem. Czy mój problem mógł zostać rozwiązany? dzięki !.

Answer 1

Jak widać w tej odpowiedzi: https://stackoverflow.com/a/6150397/1437005 można uzyskać reprezentację base64 obrazu za pomocą <canvas> i funkcji toDataURL().

Gdy pojawi się ciąg base64 można użyć AJAX wysłać obraz do serwera (można użyć jQuery $.ajax lub $.post metod), a następnie na serwerze można dekodować de base64 ciąg na obraz i zapisuje go.

Answer 2

CamanJS ma wbudowaną funkcję, która pomaga uzyskać reprezentację obrazu Base64. Możesz wysłać to na serwer poprzez Ajax, dekodować ciąg base64 i zapisać go jako normalny obraz.

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

Answer 3

Albo Zamiast wysyłać wersję Base64 do serwera i robi konwersję, można zrobić to samo na samym końcu przednim, a następnie przesłać plik do zastąpienia obrazu. W ten sposób nie trzeba pisać nowej usługi do konwersji i zamiany. Uzyskaj dane Base64 jako @Ryan wymienione, a następnie użyj poniższej funkcji, aby przekonwertować ją do 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) } 

Jeśli usługa akceptuje tylko obiekt File (nie obiektu blob) po prostu przekonwertować do pliku za pomocą Blob:

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