javascript - data:image/jpeg;base64 hur man får dess bredd och höjd i pixlar

Hur får man bredden och höjden i pixlar för en bild vars src är i data:image/jpeg;base64 ?

Lyckades inte genom att sätta img.src till det och sedan kalla width().

var img = jQuery("<img src="+oFREvent.target.result+">");
img.width() // = 0

Svar #1

Detta kommer att fungera :

var img = new Image();
img.onload = function() {
    alert(this.width);
}
img.src = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAA.......";

FIOL

Jag säkerställde att base64 var giltig genom att konvertera en bild här, och onload-funktionen bör komma innan man sätter bildens källa.

Svar #2

Du måste vänta på att bilden laddas (eller blir komplett, om den är cachad). Detta kommer att resultera i en asynkron återuppringningsoperation:

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

Observera: Jag hade en gång samma problem med ett projekt som använde jQuery. jQuery ger inte tillgång till bilden direkt tillräckligt tidigt precis efter att du har skapat den. Det verkar som att det inte är möjligt att göra det, förutom i ren JS. Men du kan försöka med en timeout-loop och vänta på att img-bredden får ett värde (och fånga eventuella laddnings-/avkodningsfel).

[Redigera, se även kommentarer] Varför detta fungerar (varför det inte finns någon tävlingskondition):

JS är enkeltrådad, vilket betyder att det bara finns en del av koden som körs vid en given tidpunkt. Alla händelser kommer att köas tills den aktuella omfattningen avslutas och kommer bara att utlösas då. Tack vare sen bindning kommer alla lyssnare att utvärderas först då (efter att den aktuella omfattningen har körts). Så hanteraren kommer att finnas och lyssna så snart onload-händelsen utlöses, oavsett om lyssnaren sattes upp före eller efter att src-attributet sattes. I kontrast till detta sätts complete-flaggan så snart src-attributet sätts.