Jcrop未在加载的图像上初始化

Jcrop not initializing on a loaded image

本文关键字:图像 初始化 加载 Jcrop      更新时间:2023-09-26

我正试图使用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>