изображение, событие onload не работает в chrome

#javascript #html #canvas #onload #filereader

#javascript #HTML #холст #загрузка #filereader

Вопрос:

Я использую html5 для создания функции загрузки изображений перетаскиванием. Это отлично работает для меня в Firefox, но в chrome событие загрузки изображения запускается только в первый раз. Если я перетаскиваю несколько изображений, работает только первое, а если я перетаскиваю второе, оно завершается неудачей. Я полагаю, что проблема связана с загрузкой изображения.

вот как работает мой код, я удалил ненужные разделы:

             var img = document.createElement("img");
            var reader = new FileReader();
            var canvas = document.createElement("canvas");
            var canvasData;
            var ctx = canvas.getContext("2d");
            var myFiles;
            var i = 0; 


                 reader.onload = (function (aImg)
                    { 
                        return function (e)
                        {
                            aImg.src = e.target.result;
                        };
                    })(img);

        img.onload = function (){

        //resizes image 
        //draws it to the canvas
        //posts to server

        i  ;
        if(i < myFiles.length){
        processNext(i);
                            }
        }



    function processNext(filei) {

         var file = myFiles[filei];

            img.file = file;

            reader.readAsDataURL(file);


        }

i = 0;
myFiles = files;
processNext(0);

Кто-нибудь знает, почему это работает в firefox, но не в chrome?

1. Не следует ли вам определить загрузку изображения перед выполнением вызова, чтобы убедиться, что вызов не произойдет до регистрации события загрузки?

2. @epascarello Спасибо за ответ, я забыл добавить этот фрагмент кода, который следует за всеми остальными. img.src изменен в processnextфункции

Ответ №1:

Объяснение от chromium tracker:

Это не ошибка. WebKit просто более строгий. Вы должны создать экземпляр нового объекта Image () перед заменой, вот так:

 var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

источник: http://code.google.com/p/chromium/issues/detail?id=7731#c12

1. Хм .. Но если мой английский меня не подводит, поведение chrome некорректно, и событие load должно запускаться каждый раз, когда изменяется src, загрузка завершается успешно. w3.org/TR/html5/embedded-content-1.html#the-img-element

2. @Harut Спасибо за ответ. Я попробовал то, что вы предложили, я добавил var img = new Image (); в мою функцию processNext, прежде чем менять источник, но я получаю те же результаты, что и раньше. вы упомянули, что событие load должно запускаться каждый раз при изменении src, я не понимаю, вы хотите сказать, что мне нужно делать это вручную?

3. Я только что сказал, что поведение FF кажется правильным. И универсальным способом должно быть уничтожение старого элемента изображения и создание нового вместо него.

4. @Harut Спасибо, у меня все получилось, вы были правы, мне приходилось каждый раз создавать новое изображение. Мне намного больше нравится Firefox : )

5. извините, это мой первый пост о stackoverflow. Я полагаю, что теперь я принял это.

Ответ №2:

Это странно, у меня ничего из вышеперечисленного не сработало. Я определял переменную image как локальную и менял ее на глобальную, и она начала работать. Имеет ли это смысл? Кто-нибудь может это объяснить?

У меня это не сработало:

 function loadImage() {  
  var ImageToLoad = new Image();
  ImageToLoad.onload = function() {
      console.log("finish loading");
  };        
  ImageToLoad.src = "myimage.png";
}

Это сработало:

   var ImageToLoad = new Image();
  function loadImage() {
  ImageToLoad.onload = function() {
      console.log("finish loading");
  };        
  ImageToLoad.src = "myimage.png";
}