Question

我想使用JCrop裁剪图像。我尝试在JSFiddle上实现一个非常简单的用法。

我使用CDN-Links包含了JQuery，JCrop和JCrop CSS。

这是我的代码：

标题

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/js/Jcrop.js"></script>
<link rel="stylesheet" href="http://jcrop-cdn.tapmodo.com/v2.0.0-RC1/css/Jcrop.css" type="text/css">

HTML：

<body>
  <img src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" id="cropTarget" />
</body>

JS：

<script type="text/javascript">
$(document).ready(function() {
  initJCrop();          
});
function initJCrop() {
  $('#cropTarget').Jcrop({bgColor: "black",bgOpacity: .4,aspectRatio: 100 / 130,setSelect: [200, 260, 50, 50]});
}
</script>

正如你所看到的，在我的JSFiddle中，它只显示一个“正常”的图像，我无法让JCrop工作。

我尝试了什么：

检查CDN-Links是否正常工作。
尝试不同的JS代码（包括the one from the JCrop Quickstart Guide）
没有$(document).ready(function(){});

Answer 1

我能够自己解决这个问题：

1）改变 - <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

收件人： - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2）将JS从标题移动到正文的底部（在<\body> - 标记之前）。

不知怎的，我$(document).ready(function() {..}) - 部分无效，initJcrop()从未被调用过。

JCrop - 功能未实现

1 个答案: