Mit cropper.js vor Dropzone.js Bild senden zum server
Was ich tun will ist hier vor Dropzone.js senden Sie das gefilterte Bild auf den server, erscheint ein modales mit cropper.js (fengyuanchen Skript), so kann der Benutzer das Bild zuschneiden, und als Bild abgeschnitten wird, senden Sie es mit Dropzone.js zu dem server.
Also, wenn ich das Bild ändern von src #cropbox mit der Funktion fileToBase64 und ersetzen das Bild von der cropper mit der Funktion cropper ("ersetzen"), es hält zeigt default.jpg Bild, anstatt der neuen hochgeladen von Benutzer
HTML
<div class="wrapper-crop-box">
<div class="crop-box">
<img src="default.jpg" alt="Cropbox" id="cropbox">
</div>
</div>
JS:
function fileToBase64(file) {
var preview = document.querySelector('.crop-box img');
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
$(function() {
Dropzone.options.avtDropzone = {
acceptedFiles: 'image/*',
autoProcessQueue: true,
paramName: 'file',
maxFilesize: 2,
maxFiles: 1,
thumbnailWidth: 200,
thumbnailHeight: 200,
accept: function(file, done) {
fileToBase64(file);
$('#cropbox').cropper('replace', $('#cropbox').attr('src'));
$('.wrapper-crop-box').fadeIn();
done();
},
init: function() {
this.on("addedfile", function(file) {
if (this.files[1]!=null){
this.removeFile(this.files[0]);
}
});
}
};
$('#cropbox').cropper({
aspectRatio: 1 / 1,
resizable: false,
guides: false,
dragCrop: false,
autoCropArea: 0.4,
checkImageOrigin: false,
preview: '.avatar'
});
});
Du musst angemeldet sein, um einen Kommentar abzugeben.
Werden Sie wahrscheinlich nicht brauchen es nicht mehr, aber ich lass es jetzt hier 🙂
War es ein bisschen schwierig, und meine Lösung ist wahrscheinlich irgendwie "hackish", aber es funktioniert und Sie nicht haben, um das hochladen von Dateien auf den server zu ändern.
Ich bin auch mit cropper in einem modalen Fenster. Ich wollte zu force user zu beschneiden, um eine bestimmte Abmessungen vor dem hochladen auf server.
Nachdem Sie bestätigen Ernte in einem modalen Bild wird sofort hochgeladen.
Hier ist eine Zusammenfassung, das diese Funktionalität bereitstellt.
https://gist.github.com/maria-p/8633b51f629ea8dbd27e
Beachten Sie, ich bin nicht der Autor.
Für Entwickler, die nicht wollen oder nicht können, haben die jQuery-Abhängigkeit.
Ich habe mir vor kurzem geschrieben Artikel über die Integration von Dropzone mit Cropper.js, kann es nützlich sein. Siehe code-Schnipsel aus dem Artikel unten.
Den HTML -
JavaScript
Eine demo der integration der code kann hier gefunden werden:
https://codepen.io/rikschennink/pen/PXQNGp?editors=0010
Habe ich es geschafft mit dropzone.js und cropper.js im inneren angular.js -Modul. vielleicht kann jemand helfen.