Изображение файла onloaded не вызывается после вызова readAsDataURL на больших изображениях

Question

Я пытаюсь прочитать файл изображения и изменить его размер и загрузить его в Ionic2 на Android. Мой код работает для изображений небольшого размера, но для изображений с более чем 3 Мбайт функция onloaded никогда не вызывается.

Я действительно ценю любую помощь или понимание относительно того, почему.

makeFileIntoBlob(_imagePath) { 


    return new Promise((resolve, reject) => { 
     window.resolveLocalFileSystemURL(_imagePath, fileEntry => { 

      fileEntry.file(file => { 

       var reader = new FileReader(); 

       console.log('Reading the file!'); 

       reader.onloadend = (e: any) => { 

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


        img.onload =() => { 
         //---> Only get here for small images! 
         var resizedImg = this.imgResizerSrvc.resize(img, 480, 480); 
         var imgBlob: any = this.dataURLtoBlob(resizedImg); 
         imgBlob.name = 'sample.jpg'; 
         console.log('makeFileIntoBlob resolved!'); 
         resolve(imgBlob); 
        } 

        //Will trigger img.onloadend 
        alert("about to trigger"); 
        img.src = e.target.result; //----> This call only triggeres reader.onloadend for small images 
        alert("Done trigger"); 

       }; 

       reader.readAsDataURL(file); 

      }); 
     }); 
    }); 

}

В качестве альтернативы, я также попробовал чтение файла, используя следующие:

img.src = (window.URL ? URL : window.webkitURL).createObjectURL(file); 

или

img.src = (window.URL || window.webkitURL || window || {}).createObjectURL(file); 

, но ни один из них не триггером img.onloaded().

Answer 1

Там может быть ограничение на .length из data URI

ограничения длины

Хотя Firefox поддерживает идентификаторы URI данных по существу неограниченной длины, браузеры не требуется поддерживать какой-либо конкретной максимум длина данных. Например, браузер Opera 11 ограниченными данными URI составляет около 65000 символов.

Вы можете использовать URL.createObjectURL() призвал file, без использования FileReader(), передать Blob созданный .imgResizerSrvc.resize для File() установить .name от создания File объекта.

makeFileIntoBlob(_imagePath) { 

    return new Promise((resolve, reject) => { 
    window.resolveLocalFileSystemURL(_imagePath, fileEntry => { 

     fileEntry.file(file => { 

     var component = /* reference to ionic2 component */ ; 

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

     img.onload =() => { 

      var resizedImg = component.imgResizerSrvc.resize(this, 480, 480); 
      var imgBlob = new File([resizedImg], "sample.jpg", { 
      type: "image/jpeg" 
      }); 
      resolve(imgBlob); 

     }; 

     img.src = URL.createObjectURL(file); 
     }); 
    }); 
    }); 
}