在回調中獲取上載圖片的高度和寬度-javascript

Question

我需要從文件字段異步加載多個圖像，它們會檢查尺寸是否有效。 我非常接近，我只需要獲取回叫時先前加載的圖像的高度即可。 到目前為止，這是我的努力：

let  files = this.fileUpload.files; //get all uploaded files 
   for (var i = 0, f; f = files[i]; i++) { //iterate over uploaded file
      console.log(f);
      let img = new Image();
      img.name=f.name;
      img.size=f.size;



       img.onload = () =>{alert(img.height)} //it is giving height here

      if (img.complete) { //callback 
           alert(img.name + 'loaded');
           load_count++;
           library_store.uploaded_image.push(
                                              {
            height:img.height,
            width:img.width, // not coming, just wondering how to get 
                             //the image height from load
            name:img.name,
            size:img.size
                                              }
                                           );
 }
if(load_count === uploaded_file_count){ // if all files are loaded
 //do all validation here , I need height and width here 
}

做這個的最好方式是什么？

Answer 1

您是否不想將library_store邏輯移至img.onload ？ 如下所示：

let  files = this.fileUpload.files; //get all uploaded files 
for (var i = 0, f; f = files[i]; i++) { //iterate over uploaded file
    console.log(f);
    let img = new Image();
    img.name=f.name;
    img.size=f.size;

    img.onload = function() {
        // hoping that ```this``` here refers to ```img```
        alert(this.name + 'loaded');
        load_count++;
        library_store.uploaded_image.push({
            height:this.height,
            width:this.width,
            name:this.name,
            size:this.size
        });

        if(load_count === uploaded_file_count){ // if all files are loaded
            //do all validation here , I need height and width here 
        }
    }

    // img.onload = () =>{alert(img.height)} //it is giving height here
    /*
    if (img.complete) { //callback 
        alert(img.name + 'loaded');
        load_count++;
        library_store.uploaded_image.push({
            height:img.height,
            width:img.width,
            name:img.name,
            size:img.size
        });

        if(load_count === uploaded_file_count){ // if all files are loaded
        //do all validation here , I need height and width here 
        }
    }
    */
}

Answer 2

首先，讓我們看一下為什么即使圖像尚未加載，也總是會落在if(img.complete)塊中：

HTMLImageElement的complete屬性僅告訴您在獲取屬性時是否正在加載其資源。

如果加載成功，失敗以及未設置src ，它將報告true 。

 var img = new Image(); console.log('no-src', img.complete); img.onerror = function() { console.log('in-error', img.complete); img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==" }; img.onload = function() { console.log('in-load', img.complete); } img.src = "/some/fake-path.png"; console.log('while loading', img.complete); 

而且，在您獲取它時，尚未設置此src屬性，因此即使您的圖像尚未加載其資源，它也將報告為true 。

---

因此，您需要一個圖像預加載器：

 function preloadImages(srcArray, mustAllSucceed) { return Promise.all(srcArray.map(loadImage)); function loadImage(src) { return new Promise((resolve, reject) => { var img = new Image(); img.onload = success; img.onerror = mustAllSucceed ? success : reject; img.src = src; function success() { resolve(img) }; }); } } preloadImages(['https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg', 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Gran_Mezquita_de_Isfah%C3%A1n%2C_Isfah%C3%A1n%2C_Ir%C3%A1n%2C_2016-09-20%2C_DD_34-36_HDR.jpg']) .then(images => { images.forEach(img => console.log(img.src, img.width, img.height)); }, true);