2016-08-03 11 views
0

부트 스트랩 3 모달을 사용하여 cropperjs Cropper (https://github.com/fengyuanchen/cropper) 이미지를 api에서로드하여 표시. 아무도 이미지에 농작물 이미지에서 크로스 기원 헤더를 찾습니다 있기 때문에 enter image description here부트 스트랩 3 모달, 크로 퍼스

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

이 문제가 발생 나타나지 않도록 : 어떤 이유로 이미지로드 이미지의 폭이 0이고, 농작물 디스플레이를 추가하지 않은 경우라고합니다 발신자