JCrop - 功能未实现答案

【问题标题】：JCrop - functionality doesn't get implementedJCrop - 功能未实现
【发布时间】：2016-01-19 15:55:29
【问题描述】：

我想使用 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 链接是否正常工作。
尝试不同的JS代码（包括the one from the JCrop Quickstart Guide）
没有$(document).ready(function(){});

【问题讨论】：

检查控制台。脚本包含被阻止，因为它不是通过安全域，即。 https://。您还有几个语法问题。一旦你解决了这些问题，它就可以正常工作：jsfiddle.net/c5ptqrbw/1
@RoryMcCrossan 您将您的评论编辑为快速，抱歉。您的链接示例似乎不适用于我的 google chrome 和 ms edge。它仍然表现得像普通图像。
这很奇怪，因为它在 W8 的 Chrome 47.0 中很好。您在控制台中看到任何错误吗？
@RoryMcCrossan 那里有很多错误。 js 和 css 的 ERR_INSECURE_RESPONSE 和 ERR_BLOCKED_BY_CLIENT 后跟“Jcrop 不是函数”。这是我浏览器的问题吗？我的手机也不行。
试试这个小提琴：jsfiddle.net/c5ptqrbw/1

标签： javascript jquery html jsfiddle jcrop

【解决方案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>-Tag 之前）。

不知何故，我的 $(document).ready(function() {..})-part 不起作用，并且从未调用过 initJcrop()。

【讨论】：