cropper.jscantので、私が欲しいものblueimp

Question

によってブロブ画像タグを初期化します。

は、blueimpと ダウンスケールを入力タイプのファイルで画像を選択し、cropper.js

でその画像 作物はそうblueimp部分があります画像はmaxWidthプロパティにリサイズされ、<img>というタグが "#imagearea"に追加されているので、そのタグに基づいてcropper.jsを初期化したい、ドキュメント内のように、コード

document.getElementById('file-input').onchange = function (e) { 
     var loadingImage = loadImage(
      e.target.files[0], 
      function (img) { 


      $(img).attr("style","max-width: 100%;") 
      $('#imagearea').append(img) 
      // now i see the image and when i inspect dom its a <img> tag 

      // so lets initialize the cropper 
      $('#imagearea').find("img").cropper({ 
       aspectRatio: 16/9, 
       crop: function(e) { 

       } 
      }); 
      }, 
      {maxWidth: 1280} 
    ); 

    }; 

が、クロッピングを初期化するとき、 は、最初のiは

GET blob:http://foo.bar/64c77709-29f7-44ba-8772-49517e7976e5 404 (Not Found) 

、次いで

キャッチされない例外RangeErrorような404エラー得る：オフセットDataView.getUint8（） におけるデータビューの境界に外にありますメートル（6eaf333.js：7051）e.value（6eaf333.js：7051）で XMLHttpRequest.n.onloadで （6eaf333.js：7051）

Answer 1

"noRevoke" オプションを使用してください。

document.getElementById('file-input').onchange = function (e) { 
 
     var loadingImage = loadImage(
 
      e.target.files[0], 
 
      function (img) { 
 

 

 
      $(img).attr("style","max-width: 100%;") 
 
      $('#imagearea').append(img) 
 
      // now i see the image and when i inspect dom its a <img> tag 
 

 
      // so lets initialize the cropper 
 
      $('#imagearea').find("img").cropper({ 
 
       aspectRatio: 16/9, 
 
       crop: function(e) { 
 

 
       } 
 
      }); 
 
      }, 
 
      {maxWidth: 1280,noRevoke: true} 
 
    ); 
 

 
    };