FileReader на сафари, стреляющий в ближайшее время

Question

Я работаю над формой стиля многостраничной анкеты, содержащей много текстовых вопросов, а также несколько изображений. На вопросы, которые являются изображениями, пользователь выбирает изображение, я создаю элемент холста и отображаю в нем уменьшенное изображение под вводом файла.

if (window.FileReader) 
    { 
     var file = element.files[0]; 
     var $input = $(element); 
     var $fileName = file.name; 
     var reader = new FileReader(); 
     reader.onload = function(e) { 

      var img = document.createElement("img"); 
      img.src = e.target.result; 

      var dataID = $input.data("questionId"); 

      var canvasID = "canvas_" + dataID; 
      $("#"+canvasID).remove(); 

      var canvas = document.createElement("canvas"); 
      canvas.setAttribute("id", canvasID); 
      canvas.setAttribute("height", "200"); 
      canvas.setAttribute("width", "200"); 

      var heightWidth = getHeightWidth(img); 
      canvas.height = heightWidth[0]; 
      canvas.width = heightWidth[1]; 

      var ctx = canvas.getContext("2d"); 
      ctx.drawImage(img,0,0, canvas.width, canvas.height); 

      var sectionID = "section_" + dataID; 
      $("#" + sectionID).append(canvas); 

      $("#file_title-" + dataID).val($fileName); 
     } 

     reader.readAsDataURL(file); 
    } 
    else 
    { 
     alert("This browser does not support image uploading."); 
    } 

Это прекрасно работает в хромированном состоянии, но не в сафари (сафари 8.x) на рабочем столе или iOS. Проблема в моем коде заключается в том, что в Safari он возвращает height = 0 width = 0 из getHeightWidth(), который дает мне понять, что img еще не готов к обработке. Эта теория далее проверяется, потому что, если я перехожу к новой картинке и возвращаюсь к оригиналу, она отображается правильно.

Я действительно не уверен, с чего начать, любая помощь, отлаживающая это, будет очень признательна. Спасибо всем

Answer 1

Код предполагает, что загрузка изображения является синхронной, но она асинхронна и должна приниматься так же с использованием URI-данных. Если изображение не загружено должным образом, его атрибуты ширины и высоты будут равны 0.

Вы можете решить эту проблему, добавив обработчик для img, затем переместите код для обнаружения и установки размера внутри этого обработчика (помните также, чтобы добавить обработчик onerror, а также в случае повреждения файла изображения).