jCrop non riesce a inizializzare il ritaglio in un primo momento su alcuni browser: javascript, php, jquery, html, jcrop

Ho cercato di creare avatar semplicifunzionalità di modifica / ritaglio / caricamento con jCrop e PHP. Tutto funziona perfettamente su Chrome e Opera, ma non riesce su Safari, Firefox e Internet Explorer (tutte sono ultime versioni). Quindi, ecco il problema: quando provo a cambiare il mio avatar e il ritaglio viene inizializzato su Chrome e Opera, sembra che questo:

E quando provo a fare lo stesso su Firefox, Safari o Internet Explorer questo sta accadendo:

Quindi la mia implementazione è abbastanza semplicechiamata ajax con l'immagine scelta con l'API FormData HTML5, quindi PHP sta gestendo la richiesta crea un file temporaneo e restituisce l'immagine codificata Base64 che mostro e cerco di ritagliare. Quando la mia chiamata ajax ha una risposta positiva, faccio semplicemente:

initializeCropping: function() {
var _this = this;

this.image.Jcrop({
onSelect: function(coords) {
_this.trackCoordinates(coords);
},
bgColor: "black",
bgOpacity: .4,
minSize: [300, 300],
setSelect: [ 0, 0, 300, 300 ],
aspectRatio: 1,
boxWidth: 310,
boxHeight: 310
}, function() { _this.jCropApi = this; });
}

("this.image" è un riferimento al selettore jQuery all'oggetto immagine già creato) Ho anche provato a impostare un timeout con javascript prima di inizializzare jCrop questa domanda, ma il risultato è lo stesso ... Qualche idea? Grazie in anticipo! :)

Modifica: Funziona solo quando seleziona la stessa immagine la seconda volta ...

risposte:

Penso di aver affrontato lo stesso tipo di problema se ho capito correttamente

prova a chiamare questa funzione ogni volta che hai completatoil raccolto o se chiude il jcrop con o senza eseguire un raccolto. Nel mio caso ho fatto una chiamata ajax per mostrare l'immagine in una modale e quindi consentire all'utente di usare jcrop e su save e cancel e escape ho chiamato questa funzione destroyCropData ()

function destroyCropData() {
debugger;
var prevDim = window.jcropVar;
prevDim.destroy();
$("#txtHeight").val("");
$("#txtWidth").val("");
$("#txtXpos").val("");
$("#txtYpos").val("");
}

e anche provare a salvare il valore di questo in una variabile globale che rende il tuo codice

initializeCropping: function() {
var jcrop_api;

this.image.Jcrop({
onSelect: function(coords) {
_this.trackCoordinates(coords);
},
bgColor: "black",
bgOpacity: .4,
minSize: [300, 300],
setSelect: [ 0, 0, 300, 300 ],
aspectRatio: 1,
boxWidth: 310,
boxHeight: 310
}, function() { jcrop_api = this; window.jcropVar = jcrop_api;});
}

Spero che questo sia quello che stai chiedendo. Scusa se questo non è quello che ti aspetti

In realtà lo capisco. C'è stato un problema con il css che solo Opera e Chorme gestiscono. L'immagine era fissata con altezza e poi le proprietà della scatola di jCrop non funzionavano, grazie per il tuo aiuto comunque.