2

以下の handleFiles メソッドには、ドラッグ アンド ドロップとファイル入力の両方からファイルが渡されます。特定のファイルのデータ URL を取得した後、それを processImage 関数に渡します。この関数は、新しいイメージを作成し、そのイメージの src とファイルを設定します。次に、着信画像の幅に基づいてさまざまなアクションを実行し、画像を dom に挿入します。しかし、画像の束をドロップすると imageWidth が 0 に設定されることに気付きました。image.src が正しく設定されており、同じ画像をドロップするだけで問題なく動作することを確認しました。また、幅の計算を削除すると、画像がページに正しく表示されることも確認しました。デバッガーに入ると、imageWidth が 0 に設定された直後に i.width が正しい値を返すことを確認できます。最初は Chrome のスレッドの問題かもしれないと思ったのですが、しかし、それが FireFox でも起こっているのを見て、私は不安になりました。特定のしきい値を特定することはできませんでしたが、ブラウザーに負荷をかけるほど、幅を正しく取得する可能性が低くなります。

FireFox 16.0.2 と Chrome 23.0.1271.95 の両方で問題が発生しています。

function handleFiles(files) {

  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    if( !isImage(file) ) { 
      continue;
    }   

    var reader = new FileReader();

    reader.onloadend = function(e) {
      var dataURL = e.target.result;
      processImage(file, dataURL);
    }   

    reader.readAsDataURL(file);
  }
}

function processImage(file, dataURL) {
  var i = new Image();
  i.src  = dataURL;
  i.file = file;

  //console.log(i);
  var maxWidth = 600;
  var imageWidth = i.width;

  ......
}
4

2 に答える 2

3

すべての画像と同様に、幅が表示されるまでに読み込みに時間がかかる場合があります。

  var i = new Image();
  i.onload = function() {
     //console.log(i);
     var maxWidth = 600;
     var imageWidth = this.width;
  }
  i.src  = dataURL;
  i.file = file;
于 2012-11-29T23:05:26.730 に答える
2

まだロードされていないため、幅 (および高さ) は 0 である可能性があります。

load次のようにイベントを追加してみてください。

function processImage(file, dataURL) {
  var i = new Image();


  i.addEventListener("load", function () {
    var maxWidth = 600;
    var imageWidth = i.width;

    ......

  });

  i.src  = dataURL;
  i.file = file;

}
于 2012-11-29T23:03:45.513 に答える