2016-08-03 98 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

这个问题是因为农作物寻找来自图像交叉原点头没有给图像发件人