JCrop - 功能未实现
Posted
技术标签:
【中文标题】JCrop - 功能未实现【英文标题】：JCrop - functionality doesn't get implemented 【发布时间】：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
【参考方案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()。
【讨论】：
以上是关于JCrop - 功能未实现的主要内容，如果未能解决你的问题，请参考以下文章