jQuery metoda eksport cropit powrót tylko 'dane :,' string

Question

mój kod html dla cropit:

<div id="image-cropper" style="direction: ltr"> 
    <div class="row margin-top-25"> 
     <div class="col-md-8 col-md-offset-2"> 
      <div class="cropit-image-preview-container"> 
       <div class="cropit-image-preview"></div> 
      </div> 
     </div> 
    </div> 
    <div class="row margin-top-15"> 
     <div class="col-md-4 col-md-offset-4"> 
      <input type="range" class="cropit-image-zoom-input" /> 
     </div> 
    </div> 
    <div class="row margin-top-15"> 
     <div class="col-md-4 col-md-offset-4"> 
      <input type="file" style="display: none" class="cropit-image-input" /> 
      <div class="R_butt_blue choose_pic text-center">انتخاب تصویر</div> 
     </div> 
    </div> 

</div> 

i mój kod JavaScript do cropit:

$('.choose_pic').click(function(){ 
    $('.cropit-image-input').click(); 
}); 

var z = $('#image-cropper').cropit({ 
    exportZoom: 1, 
    imageBackground: true, 
    imageBackgroundBorderWidth: 15 // Width of background border 
}); 
$('.send_image').click(function(){ 
    var h = z.cropit('export'); 
    $('#photo_show img').attr({ src: h }); 
}); 

chcę przyciąć obraz za pomocą plugin jquery plugin, czytam pełny dokument i multi example on web, ale to zwraca tylko ciąg, który zawiera data:, nie wiem, co jest nie tak?

Answer 1

Należy zdefiniować klasę css .cropit-image-preview, aby ustawić szerokość i wysokość przyciętego obrazu.

.cropit-image-preview { 
    /* You can specify preview size in CSS */ 
    width: 100px; 
    height: 100px; 
} 

i również użyć selektora tak:

var z = $('#image-cropper'); 
z.cropit({ 
    exportZoom: 1, 
    imageBackground: true, 
    imageBackgroundBorderWidth: 15 // Width of background border 
}); 

Spróbuj tego: http://jsfiddle.net/grzveb09/