JCrop

Question

我想使用 JCrop 裁剪图像。我尝试在 JSFiddle.

上实现一个非常简单的用法

我包括 JQuery、JCrop 和 JCrop CSS 使用 CDN-Links。

这是我的代码：

HEADER:

<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 中，它只显示了一张 "normal" 图像，我无法让 JCrop 工作。

我尝试过的：

检查 CDN-Links 是否正常工作。
尝试不同的JS-Code（包括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 从 header 移动到 body 的底部（就在 <\body>-标签之前）。

不知何故，我的 $(document).ready(function() {..}) 部分无法正常工作，而且 initJcrop() 从未被调用过。

JCrop - 功能未实现

JCrop - functionality doesn't get implemented

html

javascript

jquery

jsfiddle