Jquery Cropbox funktioniert nicht

Question

Ich versuche, Bild mit jquery cropbox zu beschneiden. Ref url: Cropbox Everythhing funktioniert gut, aber ich bin nicht in der Lage, die Bilder

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script> 

<script src="http://acornejo.github.io/jquery-cropbox/jquery.cropbox.js"></script> 
    <link type="text/css" media="screen" rel="stylesheet" href="http://acornejo.github.io/jquery-cropbox/jquery.cropbox.css"> 
    <script type="text/javascript"> 
    $(function() { 
    $('#cropimage').cropbox({ 
     width: 300, 
     height: 300 
    }).on('cropbox', function(e, data) { 
     console.log(data); 
    }); 
}); 
</script> 
<img id="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" /> 
<div id="results"> 
<b>X</b>: <span class="cropX"></span> 
<b>Y</b>: <span class="cropY"></span> 
<b>W</b>: <span class="cropW"></span> 
<b>H</b>: <span class="cropH"></span> 

</div> 

Answer 1

Bug in Bezug auf neueste Version von Chrom und Version von hammer.js aufgeführt here

Verwenden Sie die Versionen ziehen von Bibliotheken erwähnt in Beispiel in der Dokumentation zur Verfügung gestellt.

$('.cropimage').cropbox({ 
 
    width: 200, 
 
    height: 200, 
 
    showControls: 'auto' 
 
}).on('cropbox', function(event, results, img) { 
 
    console.log(results); 
 
});

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script> 
 

 
<script src="http://acornejo.github.io/jquery-cropbox/jquery.cropbox.js"></script> 
 
<link type="text/css" media="screen" rel="stylesheet" href="http://acornejo.github.io/jquery-cropbox/jquery.cropbox.css"> 
 
<img class="cropimage" alt="" src="http://acornejo.github.io/jquery-cropbox/img.jpg" /> 
 
<div class="results"> 
 
    <b>X</b>: <span class="cropX"></span> <b>Y</b>: <span class="cropY"></span> 
 
    <b>W</b>: <span class="cropW"></span> <b>H</b>: <span class="cropH"></span> 
 
</div>