Come si ottiene la larghezza e l'altezza in pixel dell'immagine che il suo src è nei dati: image/jpeg; base64?data: image/jpeg; base64 come ottenere larghezza e altezza in pixel
Non riuscito a impostare img.src su di esso e quindi chiamare width().
var img = jQuery("<img src="+oFREvent.target.result+">");
img.width() // = 0
È necessario attendere che l'immagine sia caricata (o completata, se memorizzata nella cache). Questo si tradurrà in un'operazione di callback asincrona:
// pure JS:
var img = new Image();
img.src = myDataString;
if (img.complete) { // was cached
alert('img-width: '+img.width);
}
else { // wait for decoding
img.onload = function() {
alert('img-width: '+img.width);
}
}
Nota: Una volta ho avuto lo stesso problema con un progetto che utilizza jQuery. jQuery non fornisce un accesso all'immagine direttamente abbastanza subito dopo averla creata. Sembra, non è possibile essere fatto, ma in puro JS. Ma potresti provare un timeout-loop e aspettare che la larghezza dell'immagine abbia un valore (e rilevare eventuali errori di caricamento/decodifica).
[Edit, vedere i commenti anche] Perché questo funziona (il motivo per cui non v'è alcuna gara-condizione):
JS è single-threaded, nel senso c'è solo una parte del codice eseguito in un dato momento. Tutti gli eventi verranno messi in coda fino all'uscita dall'ambito corrente e verranno attivati solo in quel momento. Grazie a late-binding, tutti gli ascoltatori verranno valutati solo successivamente (dopo che l'ambito corrente è stato eseguito). Quindi il gestore sarà presente e in ascolto non appena viene attivato l'evento onload, indipendentemente dal fatto che il listener sia stato configurato prima o dopo aver impostato l'attributo src. Al contrario, il flag completo viene impostato non appena viene impostato l'attributo src.
la memorizzazione nella cache non è un problema, in quanto le immagini di base64 non verranno memorizzate nella cache! – adeneo
hmm, sei sicuro per un futuro? meglio gestire questo caso limite ora e per sempre ... – masswerk
Sì, sono sicuro che l'immagine non è nella cache, ma se il file con la stringa base64 è statico, come un file .js o .html e le intestazioni sono impostati correttamente, quel file, con la stringa base64, verrà memorizzato nella cache, ma non nello stesso modo in cui un browser memorizzerebbe le immagini nella cache, quindi il gestore completo non ha alcun significato. – adeneo
Ciò funzionerà:
var img = new Image();
img.onload = function() {
alert(this.width);
}
img.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAA.......";
mi sono assicurato il Base64 era valida convertendo un'immagine here, e la funzione onLoad dovrebbe venire prima di impostare l'origine dell'immagine.
Hai aspettato il caricamento dell'immagine? – Musa
@Musa, non credo, guarda la mia modifica – Alon