Question

我正在尝试使用jquery cropbox裁剪图像。参考网址：Cropbox Everythhing工作正常，但我无法拖动图像

 <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

有关最新版Chrome和hammer.js版本的
错误已列出here

使用文档中提供的示例中提到的库版本。

$('.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>

Jquery Cropbox无法正常工作

1 个答案: