Wie kann man die Bildgröße (Höhe und Breite) mit JavaScript ermitteln?

Question

Gibt es irgendwelche JavaScript- oder jQuery-APIs oder Methoden, um die Abmessungen eines Bildes auf der Seite zu ermitteln?

Answer 1

Vielleicht hilft das anderen. In meinem Fall habe ich eine File Typ (das ist garantiert ein Bild sein) & Ich möchte das Bild Dimensionen ohne Laden es auf dem DOM.

Allgemeine Strategie: Konvertieren File a ArrayBuffer -> Konvertieren ArrayBuffer in einen base64-String umwandeln -> diesen als Bildquelle mit einer Image Klasse -> verwenden naturalHeight & naturalWidth um die Abmessungen zu erhalten.

const fr = new FileReader();
fr.readAsArrayBuffer(image); // image the the 'File' object
fr.onload = () => {
  const arrayBuffer: ArrayBuffer = fr.result as ArrayBuffer;

  // Convert to base64. String.fromCharCode can hit stack overflow error if you pass
  // the entire arrayBuffer in, iteration gets around this
  let binary = '';
  const bytes = new Uint8Array(arrayBuffer);
  bytes.forEach(b => binary += String.fromCharCode(b));
  const base64Data = window.btoa(binary);

  // Create image object. Note, a default width/height MUST be given to constructor (per 
  // the docs) or naturalWidth/Height will always return 0.
  const imageObj = new Image(100, 100);
  imageObj.src = `data:${image.type};base64,${base64Data}`;
  imageObj.onload = () => {
    console.log(imageObj.naturalWidth, imageObj.naturalHeight);
  }
}

Dies ermöglicht es Ihnen, die Bildabmessungen und das Seitenverhältnis aus einer File ohne sie wiederzugeben. Kann leicht die onload Funktionen zu RxJS Observables mit fromEvent für ein besseres asynchrones Erlebnis:

// fr is the file reader, this is the same as fr.onload = () => { ... }
fromEvent(fr, 'load')

Answer 2

Sie können die Eigenschaft onload handler anwenden, wenn die Seite in js oder jquery wie folgt geladen wird:-

$(document).ready(function(){
   var width = img.clientWidth;
   var height = img.clientHeight;

 });

Answer 3

Nicky De Maeyer fragte nach einem Hintergrundbild; ich hole es einfach aus dem CSS und ersetze die "url()":

var div = $('#my-bg-div');
var url = div.css('background-image').replace(/^url\(\'?(.*)\'?\)$/, '$1');
var img = new Image();
img.src = url;
console.log('img:', img.width + 'x' + img.height); // zero, image not yet loaded
console.log('div:', div.width() + 'x' + div.height());
img.onload = function() {
  console.log('img:', img.width + 'x' + img.height, (img.width/div.width()));
}

Answer 4

Sie können einfach so testen.

  <script>
  (function($) {
        $(document).ready(function() {
            console.log("ready....");
            var i = 0;
            var img;
            for(i=1; i<13; i++) {
                img = new Image();
                img.src = 'img/' + i + '.jpg';
                console.log("name : " + img.src);
                img.onload = function() {
                    if(this.height > this.width) {
                        console.log(this.src + " : portrait");
                    }
                    else if(this.width > this.height) {
                        console.log(this.src + " : landscape");
                    }
                    else {
                        console.log(this.src + " : square");
                    }
                }
            }
        });
    }(jQuery));
  </script>

Answer 5

function outmeInside() {
var output = document.getElementById('preview_product_image');

 if (this.height < 600 || this.width < 600) {
     output.src = "http://localhost/danieladenew/uploads/no-photo.jpg";
     alert("The image you have selected is low resloution image.Your image width=" + this.width + ",Heigh=" + this.height + ". Please select image greater or equal to 600x600,Thanks!");
 } else {
     output.src = URL.createObjectURL(event.target.files[0]);

 }
 return;

 }

 img.src = URL.createObjectURL(event.target.files[0]);
}

dies funktioniert für die Vorschau und den Upload mehrerer Bilder. wenn Sie für jedes der Bilder eines nach dem anderen auswählen müssen. Dann kopieren Sie und fügen Sie in alle die Vorschau-Bild-Funktion und validieren!!!