ブートストラップ3モーダル、クロッパーズ

Question

ブートストラップ3モーダルを使用して、cropperjs Cropper（https://github.com/fengyuanchen/cropper）の画像をapiからロードして表示する。どれを画像にクロッパーは、画像からのクロスオリジン・ヘッダを探しますので、

function createCropZone(url){ 
      $('#options-modal') 
        .modal('show') 
        .find('.modal-title') 
        .text('Crop Zone ') 

      var img = $('<img>', {'src' : url}) 

      $('.modal-body .row') 
        .empty() 
        .append(img) 


       img.on('load', function(){ 
         var defaultWidth = 1024; 
         if(img.width() === 0){ 
          $('.modal-body').css({'width' : defaultWidth + 'px'}) 
          $('.modal-content').css({'width' : (defaultWidth + 50) + 'px'}) 
          $('.modal-content').css({'left': '-220px'}) 

         }else{ 
          $('.modal-body').css({'width' : img.width() + 'px'}) 
          $('.modal-content').css({'width' : (img.width() + 50) + 'px'}) 
          if(img.width() > 800){ 
           $('.modal-content').css({'left': '-220px'}) 
          } 

         } 

//    cropZone($('.modal-body .row').get(0)) 

       }) 
       $(img).cropper({ 
           aspectRatio: 16/9, 
           crop: function(e) { 
           // Output the result data for cropping image. 
           console.log(e.x); 
           console.log(e.y); 
           console.log(e.width); 
           console.log(e.height); 
           console.log(e.rotate); 
           console.log(e.scaleX); 
           console.log(e.scaleY); 
           } 
          }); 



     } 

Answer 1

この問題が発生した表示されませんので：何らかの理由で画像のロードは、画像幅が0である、とクロッパーは、ディスプレイを追加されていないときに呼び出されます送信者