изображение, событие загрузки не работает в Chrome - PullRequest
Новая
       68

изображение, событие загрузки не работает в Chrome

8 голосов
/ 28 апреля 2011

Я использую 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?

Ответы [ 2 ]

7 голосов
/ 28 апреля 2011

Объяснение из трекера хрома:

Это не ошибка.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;

source: http://code.google.com/p/chromium/issues/detail?id=7731#c12

0 голосов
/ 16 апреля 2016

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

Это не сработало для меня: 

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";
}
...