Bilddateigröße + Abmessungen per Javascript ermitteln?

Lesezeit: 6 Minuten

Bilddateigrose Abmessungen per Javascript ermitteln
Scottru

Als Teil einer Webanwendung muss ich, sobald Bilder heruntergeladen und auf einer Webseite gerendert wurden, die Dateigröße (KB) und die Auflösung eines Bildes im Browserkontext bestimmen (damit ich diese Informationen beispielsweise auf der Seite anzeigen kann Dies muss natürlich clientseitig erfolgen und muss im X-Browser ohne ActiveX-Steuerelement oder Java-Applet gelöst werden können (IE7+, FF3+, Safari 3+, IE6 nice to have), muss es aber nicht die gleiche Lösung pro Browser sein.

Idealerweise würde dies mit System-Javascript erfolgen, aber wenn ich unbedingt eine JQuery- oder ähnliche Bibliothek (oder eine kleine Teilmenge davon) benötige, könnte dies geschehen.

  • Beachten Sie, dass die ersten drei Antworten sich auf die falsche Beschreibung beziehen, mit der ich begonnen habe (wo ich sagte, dass ich über das Hochladen von Bildern gesprochen habe). Ich entschuldige mich bei diesen Leuten.

    – scottru

    21. August 2009 um 7:11 Uhr

1646316913 169 Bilddateigrose Abmessungen per Javascript ermitteln
Christian C. Salvado

Bearbeiten:

Um die aktuelle In-Browser-Pixelgröße eines DOM-Elements (in Ihrem Fall IMG-Elemente) ohne Rahmen und Rand zu erhalten, können Sie die verwenden clientBreite und clientHöhe Eigenschaften.

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

Jetzt komme ich auf die Dateigröße, jetzt kann ich nur noch an die denken fileSize-Eigenschaft die Internet Explorer für Dokument und verfügbar macht IMG Elemente…

Bearbeiten 2: Da fällt mir was ein…

Um die Größe einer auf dem Server gehosteten Datei zu ermitteln, können Sie einfach eine HEAD-HTTP-Anforderung mit Ajax. Diese Art von Anfrage wird verwendet, um Metainformationen über die von der Anfrage implizierte URL zu erhalten, ohne dass deren Inhalt in der Antwort übertragen wird.

Am Ende der HTTP-Anforderung haben wir Zugriff auf die Antwort-HTTP-Header, einschließlich der Inhaltslänge was die Größe der Datei in Bytes darstellt.

Ein einfaches Beispiel mit raw XHR:

var xhr = new XMLHttpRequest();
xhr.open('HEAD', 'img/test.jpg', true);
xhr.onreadystatechange = function(){
  if ( xhr.readyState == 4 ) {
    if ( xhr.status == 200 ) {
      alert('Size in bytes: ' + xhr.getResponseHeader('Content-Length'));
    } else {
      alert('ERROR');
    }
  }
};
xhr.send(null);

Notiz: Denken Sie daran, dass Sie bei Ajax-Anfragen durch die eingeschränkt sind Gleiche Ursprungspolitikwodurch Sie Anfragen nur innerhalb derselben Domäne stellen können.

Überprüfen Sie einen funktionierenden Proof of Concept Hier.

Bearbeiten 3:

1.) In Bezug auf die Inhaltslänge denke ich, dass eine Größenabweichung auftreten könnte, wenn beispielsweise die Serverantwort gzippt ist. Sie können einige Tests durchführen, um festzustellen, ob dies auf Ihrem Server passiert.

2.) Um die Originalabmessungen eines Bildes zu erhalten, könnten Sie beispielsweise ein IMG-Element programmgesteuert erstellen:

var img = document.createElement('img');

img.onload = function () { alert(img.width + ' x ' + img.height); };

img.src="http://sstatic.net/so/img/logo.png";

  • Beachten Sie, dass die Inhaltslänge >= die tatsächliche Dateigröße ist, da die Daten für den Transport verschlüsselt werden können.

    – Aaron Digulla

    21. August 2009 um 8:12 Uhr

  • Danke. Ein paar Followups: 1) Welche Art von Codierung würde für JPGs passieren, die die Größe erhöhen könnten? 2) Wenn die Größe des Bildes im Browser geändert wird, gibt es eine Möglichkeit, die ursprünglichen Bildabmessungen zu erhalten?

    – scottru

    21. August 2009 um 16:07 Uhr

  • hm funktioniert bei mir nicht, was mache ich falsch (es zeigt mir 0 )? $(“#temp_image”).html(‘obr1‘); var img = document.getElementById(‘tmp’); alert(img.clientWidth);

    –mm.

    29. September 2009 um 8:04 Uhr

  • Falls jemand anderes neugierig ist, dies auszuprobieren, wird Chrome zumindest einen Cross-Site-Scripting-Fehler auf Daten-URLs ausgeben (dh von einem canvas.toDataURL() -Ergebnis ). Es ist anscheinend erwartetes Verhalten.

    – euxneks

    15. Mai 2013 um 21:12 Uhr

  • Das ist alt, aber für die bearbeiten 3anstatt ein neues img-Element zu erstellen, können Sie direkt die imgs abrufen naturalWidth und naturalHeight Eigenschaften.

    – Kaiido

    31. Januar 2018 um 3:48 Uhr

Bilddateigrose Abmessungen per Javascript ermitteln
Mohanrajan

Überprüfen Sie die hochgeladene Bildgröße mit Javascript

<script type="text/javascript">
    function check(){
      var imgpath=document.getElementById('imgfile');
      if (!imgpath.value==""){
        var img=imgpath.files[0].size;
        var imgsize=img/1024; 
        alert(imgsize);
      }
    }
</script>

HTML Quelltext

<form method="post" enctype="multipart/form-data" onsubmit="return check();">
<input type="file" name="imgfile" id="imgfile"><br><input type="submit">
</form>

  • Ich mag diesen Hack wirklich 🙂 aber leider können Sie den Wert eines Datei-Upload-Eingabeelements nicht festlegen 🙁

    – Jan Wiemers

    12. August 2014 um 12:45 Uhr

  • Der Browser zeigt den Datei-Upload als Schaltfläche an. Hier können wir eine Datei durchsuchen und auswählen. Also habe ich keinen Wert für den Datei-Upload festgelegt

    – Mohanrajan

    21. Juli 2016 um 12:00 Uhr

1646316916 400 Bilddateigrose Abmessungen per Javascript ermitteln
Niket Pathak

Erhalten der ursprünglichen Abmessungen des Bildes

Wenn Sie die ursprünglichen Bildabmessungen benötigen (nicht im Browserkontext), clientBreite und clientHöhe Eigenschaften funktionieren nicht, da sie falsche Werte zurückgeben, wenn das Bild über CSS gestreckt/geschrumpft wird.

Bekommen ursprüngliche Bildabmessungenverwenden natürlicheHöhe und natürliche Breite Eigenschaften.

var img = document.getElementById('imageId'); 

var width = img.naturalWidth;
var height = img.naturalHeight;

p.s Dies beantwortet nicht die ursprüngliche Frage, da die akzeptierte Antwort die Arbeit erledigt. Dies dient stattdessen als Ergänzung dazu.

Wie wäre es damit:

var imageUrl="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg";
var blob = null;
var xhr = new XMLHttpRequest(); 
xhr.open('GET', imageUrl, true); 
xhr.responseType="blob";
xhr.onload = function() 
{
    blob = xhr.response;
    console.log(blob, blob.size);
}
xhr.send();

http://qnimate.com/javascript-create-file-object-from-url/

wegen Gleiche Ursprungsrichtliniefunktionieren nur unter demselben Ursprung

1646316917 854 Bilddateigrose Abmessungen per Javascript ermitteln
michal.jakubeczy

Zur Breite und Höhe:

var img = document.getElementById('imageId'); 

var width = img.clientWidth;
var height = img.clientHeight;

In Bezug auf die Dateigröße, die Sie verwenden können performance

var size = performance.getEntriesByName(url)[0];
console.log(size.transferSize); // or decodedBodySize might differ if compression is used on server side

1641983036 595 Verknupfte ungenutzte Dateien und ungenutztes JavaScript erkennen
Gaël Métais

Servicemitarbeiter haben Zugriff auf Header-Informationen, einschließlich der Content-Length Header.

Servicemitarbeiter sind ein bisschen kompliziert zu verstehen, deshalb habe ich eine kleine Bibliothek mit dem Namen erstellt sw-get-header.

Dann müssen Sie:

  1. abonnieren Sie die Bibliothek response Veranstaltung
  2. Identifizieren Sie die URL des Bildes unter allen Netzwerkanforderungen
  3. Hier gehen Sie, Sie können das lesen Content-Length Header!

Beachten Sie, dass Ihre Website eingeschaltet sein muss HTTPS Service Worker einzusetzen, Der Browser muss kompatibel sein mit Servicemitarbeitern und die Bilder müssen auf dem sein gleiche Herkunft als Ihre Seite.

Bilddateigrose Abmessungen per Javascript ermitteln
Punit S

Die meisten Leute haben geantwortet, wie die Abmessungen eines heruntergeladenen Bildes bekannt sein können, also werde ich nur versuchen, einen anderen Teil der Frage zu beantworten – die Dateigröße des heruntergeladenen Bildes zu kennen.

Sie können dies mit der Ressource-Timing-API tun. Ganz speziell können die Eigenschaften transferSize, encodedBodySize und decodedBodySize für diesen Zweck verwendet werden.

Sehen Sie sich meine Antwort hier an, um ein Code-Snippet und weitere Informationen zu erhalten, wenn Sie Folgendes suchen: JavaScript – Holen Sie sich die Größe in Bytes von HTML img src

924220cookie-checkBilddateigröße + Abmessungen per Javascript ermitteln?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy