Jcrop未在加载的图像上初始化
Jcrop not initializing on a loaded image
我正试图使用Jcrop使图像的一部分可选择,以检索特定的坐标。目前,我正在使用Ajax加载与图像相关的信息,然后在Javascript中创建图像标签并输入信息。然后我调用一个函数,该函数应该初始化Jcrop以使图像可选。PHP方面肯定会返回正确的数据,使用正确的源创建图像,并且"setImg"函数正在注册它被调用(弹出窗口警报)。
从本质上讲,我不完全确定我在Jcrop方面做错了什么。我已经学习了一些关于初始化它的教程,但并没有真正产生任何结果。该图像保持为默认图像。
关于变量:"pID"answers"cID"是Ajax函数正在查找的"page"图像的页面ID和漫画ID,然后在结果中创建。
Javascript:
<script>
function editPage(pID, cID)
{
$.ajax({
url : "editPage.php",
type : "get",
data: ({'pageID': pID}),
async: false,
success : function(result)
{
document.getElementById("soloPage").innerHTML="";
var getImg = result[0].pageLocation;
var out = "<br><p><img name ='" + ('solopgnm' + result[0].pageNum) + "' id='solopgid' src='" + result[0].pageLocation + "' width='95%;' ></p>";
document.getElementById("soloPage").innerHTML=out;
document.getElementById("editPageTagID").innerHTML=("Currently editing: Page " + result[0].pageNum);
$("#divEditComics").hide();
$("#divEditPage").show();
setImg();
},
error: function()
{
connectionError();
}
});
}
</script>
<script>
function setImg()
{
window.alert("Function called.");
jQuery(window).load(function(){
jQuery('#solopgid').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
});
}
</script>
如果有任何关于正确学习方向的帮助或建议,我们将不胜感激(尽管我试图遵循文档,但收效甚微。如果我错过了一些简单的东西,我们深表歉意)。
尝试删除setImg函数中的"jQuery(window).load(.."部分。窗口加载事件已经触发,因此封装的代码无法执行。
如果没有一个完整的例子,很难确切地知道你在尝试什么,但这里有一个快速而肮脏的jsfiddle例子可能会有所帮助。基于提供的代码和一堆假设。
result = [{
pageLocation: "http://deepliquid.com/Jcrop/demos/demo_files/pool.jpg",
pageNum: '2'
}];
function editPage() {
document.getElementById("soloPage").innerHTML = "";
var getImg = result[0].pageLocation;
var out = "<br><p><img name ='" + ('solopgnm' + result[0].pageNum) + "' id='solopgid' src='" + result[0].pageLocation + "' ></p>";
document.getElementById("soloPage").innerHTML = out;
setImg();
}
function showCoords(c) {
$('#output').text(c.x + ', ' + c.y);
}
function setImg() {
//following load line commented out
// jQuery(window).load(function(){
jQuery('#solopgid').Jcrop({
onChange: showCoords,
onSelect: showCoords
});
// });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.Jcrop.min.js"></script>
<div>
<div id="soloPage"></div>
<div id="output"></div>
<button type="button" onclick="editPage()">Click to Load Image</button>
</div>
相关文章:
- 使用javascript函数在页面初始化后加载jquery
- 未捕获错误:无法在初始化之前调用方法;
- 如何在剑道网格初始化后设置pageSizes
- React redux初始化功能,无论状态变化如何
- 为什么可以't Protractor在自动初始化的Angular网站上查找Angular
- 尝试初始化()Spine's控制器和故障
- Angular.js延迟控制器初始化
- 对插件初始化后动态加载的元素进行样式设置
- Angular JS控制器初始化错误
- 在XMLHttpRequest之后重新初始化jQuery
- ember-js组件初始化不同的函数
- Youtube JavaScript API不是't正在初始化
- Jcrop未在加载的图像上初始化
- CamanJS在画布上用图像初始化(视网膜错误)
- j轮播每次点击图像时初始化/刷新/重新加载
- jQuery检查懒人加载插件初始化图像
- 无法找到初始化的图像或画布
- 如何在上传到画布之前初始化图像
- 通过刚刚单击的图像初始化Slick Slider
- KineticJS:如何从画布初始化图像