2016-08-03 155 views
0

使用bootstrap 3模式顯示帶有從api加載的圖像的cropperjs裁剪器(https://github.com/fengyuanchen/cropper)。出於某種原因,圖像的負載被稱爲當圖像寬度是0,並且割草機是增加顯示:所以它不會出現 enter image description herebootstrap 3 modal,cropperjs

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); 
           } 
          }); 



     } 

回答

0

這個問題是因爲農作物尋找來自圖像交叉原點頭沒有給圖像發件人