Speichern von Bildern nach dem Ändern von CamanJS Plugin

Question

So habe ich einige Bilder und ich könnte erfolgreich Effekte anwenden, indem Sie das CamanJS Plugin verwenden. Aber jetzt möchte ich diese veränderten Bilder speichern und durch das Original ersetzen.

Die Dokumentation (link) Bietet Informationen zum Speichern von Bildern. aber es wird als Download-Aufforderung angezeigt. Ich möchte, dass die Bilder ohne Eingabeaufforderung und mit einem Klick auf den "Speichern" -Button auf dem Server gespeichert werden.

Die Dokumentation sagt auch etwas über Base64-Codierung, die ich nicht verstehe. Könnte mein Problem gelöst werden? danke !.

Answer 1

Wie Sie in dieser Antwort sehen können: https://stackoverflow.com/a/6150397/1437005 können Sie die Base64-Darstellung eines Bildes mit <canvas> und die Funktion toDataURL() erhalten.

Wenn Sie die Base64-Zeichenfolge erhalten Sie AJAX verwenden können, um das Bild an den Server zu senden (können Sie jQuery $.ajax oder $.post Methoden verwenden) und dann auf dem Server können Sie de base64 String in ein Bild dekodieren und speichern sie.

Answer 2

CamanJS hat eine eingebaute Funktion, die Ihnen hilft, die Base64-Darstellung des Bildes zu erhalten. Sie können dies über Ajax an den Server senden, die Base64-Zeichenfolge dekodieren und als normales Bild speichern.

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

Answer 3

oder anstelle der Base64-Version an den Server sendet und die Umwandlung zu tun, können Sie das gleiche auf dem vorderen Ende selbst tun und dann die Datei laden Sie Ihr Bild zu ersetzen. Auf diese Weise müssen Sie keinen neuen Dienst zum Konvertieren und Ersetzen schreiben. Besorgen Sie sich die Base64-Daten als @Ryan erwähnt und verwenden Sie dann die unten stehende Funktion, um es in File/Blob zu konvertieren.

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) } 

Wenn Ihr Dienst nur Datei-Objekt akzeptiert (kein Blob-Objekt) einfach Blob konvertieren Datei mit:

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