2016-08-03 3 views
0

используя bootstrap 3 модальный, чтобы показать cropperjs cropper (https://github.com/fengyuanchen/cropper) с изображением, загруженным из api. По какой-то причине нагрузки изображение называется, когда ширина изображения 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

эта проблема происходит потому, что промахнулись ищет кросс заголовок происхождения из изображения отправитель