Question

这是一个jquery脚本，在用户选择要上传的文件后触发（代码对于调试来说有点乱）。 1.用户选择jpeg图像文件（f）后，加载图像并将其宽度和高度与允许的最大值进行比较。 2.如果图像太大，请调用resize以缩小尺寸。 3.由于图像onload是异步的，因此调用回调函数afterloading(image)：

$(function(){
    $('#uploaded_file_file_for_upload').change(function(){
        var _URL = window.URL || window.webkitURL;
        var img; 
        var max_width = 0; 
        var max_height = 0; 
        var max_size_mb;
        var f = $(this)[0].files[0];  
        if (f != null) {
          max_width = $('#max_width').val();
          max_height = $('#max_height').val();
          max_size_mb = $('#max_size_mb').val();
          alert(max_width +', ' + max_height);
          $('#file_name').val(f.name);
          alert(f.name);
          $('#file_size').val(f.size/1024);
          $('#file_type').val(f.type);  //image/jpeg
          $('#file_extension').val(f.name.split('.').pop().toLowerCase());
          alert(f.type);
          alert(f.name.split('.').pop().toLowerCase());
          if (f.type == 'image/jpeg') {
            img = new Image();
            img.onload = function () {
              afterloading(this);
              return false;
            };
            img.src = _URL.createObjectURL(f);
          };
        };


    function afterloading(image) {
        var w = image.width, h = image.height;
        alert('hi-max' + max_width + ' -- ' + max_height);
        alert('hi' + w + ' xx ' + h);
        if (w > max_width || h > max_height) {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               img.src = _URL.createObjectURL(f);
          if (w > max_width){
            h = Math.ceil(h * max_width / w);
            w = max_width;
          } else if (h > max_height) {
            w = Math.ceil(w * max_height / h);
            h = max_height;
          };
          alert('before resize, ' + w + ' ?? ' + h );
          resize(image, w, h); 
          $('#remove').val('true');
          return false;
        };
    };

    function resize(image, width, height) {
        alert('resize');
      var mainCanvas = document.createElement("canvas");
      mainCanvas.width = width;
      mainCanvas.height = height;
      var ctx = mainCanvas.getContext("2d");
      ctx.drawImage(image, 0, 0, width, height);
      $('#uploaded_file_hidden_file').val(mainCanvas.toDataURL("image/jpeg")); 
      $('#file_size').val(image.size/1024);
      alert($('#file_size').val());
      alert("++" + image.size);
      return false;
    };

    return false;

});
});

问题是afterloading(image)的执行会导致无限循环。什么可能导致无限循环？

更新：

在评论resize(image, w,h)中的afterloading后，存在相同的无限循环。所以问题出在afterloading本身。

Answer 1

我只是在这里推测，因为你还没有提供上面代码的jsfiddle，但是img加载到什么地方，加载的时间是什么时候？

img = new Image();
img.onload = function () {
  afterloading(this);
  return false;
};

afterloading期待image个对象，它似乎在f。尝试将f传递给afterloading以确定它是否有效，因为上面的内容应该做你想做的事。

编辑：

this中的afterloading似乎是您刚才创建的img对象的范围，它是空的。

函数处理异步onload的无限循环

1 个答案: