Ich habe eine Anwendung mit cropper.js zum Beschneiden von Bildern erstellt. Die Anwendung funktioniert und das Bild beschneidet, danach versuche ich, das zugeschnittene Bild als Blob an die Serverseite zum Speichern zu senden,
Wie in der cropper.js Dokumentation beschrieben, können wir canvas.toDataURL , um eine Daten-URL zu erhalten, oder verwenden Sie canvas.toBlob , um einen Blob zu erhalten und ihn mit FormData auf den Server hochzuladen. Wenn ich canvas.toDataURL () ausprobiert habe, bekomme ich die base64-Zeichenfolge, aber eigentlich muss ich die Datei als Blob senden, also habe ich es mit canvas.toBlob () versucht, aber ich Ich bekomme Uncaught TypeError: canvas.toBlob is not a function in Chrome und TypeError: Not enough arguments to HTMLCanvasElement.toBlob. in Firefox
Kann mir bitte jemand eine Lösung dafür geben
Mein Code ist wie folgt
%Vor%Die Methode toBlob ist asynchron und benötigt zwei Argumente, die Callback-Funktion und den Image-Typ (es gibt einen optionalen dritten Parameter für die Qualität):
void canvas.toBlob (Rückruf, Typ, EncoderOptions);
Beispiel
%Vor%Nicht alle Browser unterstützen es (IE benötigt Präfix, msToBlob, und es funktioniert anders als der Standard) und Chrome benötigt ein Polyfill .
Aktualisieren ( zur Bearbeitung durch OP, jetzt entfernt ) Der Hauptgrund, warum das zugeschnittene Bild größer ist, liegt darin, dass das Original JPEG ist, das neue ist PNG. Sie können dies ändern, indem Sie toDataURL:
verwenden %Vor%, bevor Sie es an die manuelle Daten-uri zu Blob übergeben. Ich würde empfehlen, das Polyfill zu verwenden, als ob der Browser toBlob () unterstützt, es wird um ein Vielfaches schneller sein und weniger Speicher-Overhead benötigen, als durch die Kodierung eines Daten-URI.
Tags und Links javascript jquery image html5 canvas