ファイルを開くときと呼び出したときに元の画像サイズを取得する方法imageareaselect

Question

ImageAreaSelectをWebサイトの例で呼び出し、クロップ選択の適切なスケーリングの元の画像サイズパラメータを取得するのに苦労しています。使用可能なクロップ領域はコンテナの全幅です（私はむしろイメージの幅になります）。そして、私はcssでmax-widthパラメータを使用して、ロードされたファイルの幅をコンテナよりも小さく制限しました。セレクタをリサイズする例はたくさんありますが、元の幅と高さを取得するにはどうすればよいですか？私は別のキャンバスで後でjsピクセル操作のために開いたファイル名を正常に保存していますが、大きすぎるイメージが読み込まれた場合は、選択結果を再スケーリングする必要があります。

HTML：

<div class="container demo"> 
    <div style="float: left; width: 50%;">  
     <div class="frame" style="margin: 0 0.3em; width: 800px; height: 800px;"> 
      <input type="file" id="file"/> 
      <br /> 
      <div id="view"> Your image will load here</div> 
     </div> 
    </div> 
</div> 

CSS：

.imgContainer img { max-width: 600px;} 

JS：

function preview(img, selection) { 
    if (!selection.width || !selection.height) 
     return; 

    // or do some conditional scaling here if image is large 
    x_1 = selection.x1; //I use these globals elsewhere for pixel calcs 
    y_1 = selection.y1; 
    S_wid = selection.width; 
    S_hei = selection.height; 
    L = Math.floor((S_wid * S_hei)/4096); //4-bit ave color density 
} 

$(function() { 
    $('#view').imgAreaSelect({ 
     handles: true, 
     fadeSpeed: 200, 
     // imageHeight: originalHeight, //how to get these, or do elsewhere? 
     // imageWidth: originalWidth, 
     onSelectChange: preview 
    }); 
}); 

$(window).load(function() { 
    $('#file').change(function() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(this.files[0]); 
     console.log(this.files[0]); 
     oFReader.onload = function (oFREvent) { 
      $('#view').html('<img src="' + oFREvent.target.result + '">'); 
      fname = oFREvent.target.result; //global, used later elsewhere 
      // some way to get original image sizes here, or do elsewhere? 
     }; 
    }); 
}); 

私が提案ソリューションの多くをしようとしてきたが、それに何かを得ることができていません正しく機能します。 .width() js関数の呼び出しは、コンテナの幅を返します。 .naturalWidthのコールは、src="some file"というよく定義されたimg IDを持っていない限り、定義されていません。getElementById jqueryでこのように開かれたファイルのimg IDを取得または定義する方法がわかりません。うまくいけば、私はここで紛失している単純なものがあります。助けを前にありがとう。

Answer 1

私が正しく理解していれば、naturalWidthは画像から情報を取得するのが早すぎるため動作しません。イメージが読み込まれるまで待ってから、imgAreaSelectを更新してください（私はドキュメントをチェックしました。オプションを設定するメソッドがあります）。私たちは元のオプションを再宣言する必要がある場合、私は、imgAreaSelectのsetOptions方法がどのように動作するかわからないんだけど

 var $img = jQuery('<img src="' + oFREvent.target.result + '">') 
     .on('load', function(){ 

      // The image's data will be available now, 
      // so update imgAreaSelect with the new values. 
      var iAS = $('#view').imgAreaSelect({ instance: true }); 
      iAS.setOptions({ 
       handles: true, 
       fadeSpeed: 200, 
       imageHeight: this.naturalHeight, 
       imageWidth: this.naturalWidth, 
       onSelectChange: preview 
      });    
     }); 
     $('#view').html($img); 
     fname = oFREvent.target.result; //global, used later elsewhere 

：ような何かに

 $('#view').html('<img src="' + oFREvent.target.result + '">'); 
     fname = oFREvent.target.result; //global, used later elsewhere 
     // some way to get original image sizes here, or do elsewhere? 

：

次のコードブロックから変更します何を入力すれば良いですか？handles、fadeSpeedなどを再度設定する必要はありません。