12

我正在使用 html5 创建拖放图像上传功能。这在 Firefox 中对我很有用，但在 chrome 中，图像 onload 事件仅在第一次触发。如果我仅在第一个作品中拖动多个图像并且如果我在其中拖动第二个图像则失败。我相信问题出在图像加载上。

这是我的代码的工作方式，我删除了不相关的部分：

            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 中无效？

4

2 回答 2

13

铬跟踪器的解释：

这不是错误。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

于 2011-04-28T15:48:09.500 回答
4

这很奇怪，以上都不适合我。我将图像变量定义为本地变量并将其更改为全局变量并开始工作。这有意义吗？有人可以解释一下吗？

这对我没有用：

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";
}
于 2016-04-16T06:36:34.140 回答