Question

我正在尝试使用Jcrop使图像的一部分可选，以检索特定的坐标。就目前而言，我正在使用Ajax加载与图像相关的信息，然后在Javascript中创建图像标记并输入信息。然后我调用一个函数，该函数应该初始化Jcrop以使图像可选。 PHP方面肯定会返回正确的数据，图像是使用正确的源创建的，而'setImg'函数正在注册它被调用（窗口警告弹出）。

基本上，我不完全确定我在Jcrop上做错了什么。我已经关注了几个关于初始化它的教程，但这并没有真正产生任何结果。图像保持默认状态。

关于变量：'pID'和'cID'是Ajax函数查找的'page'图像的页面和漫画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>

任何有关正确学习方向的帮助或指示都会受到赞赏（尽管我试图按照文档进行操作，但如果我错过了一些简单的事情，我会道歉。）

Answer 1

尝试删除setImg函数中的'jQuery（window）.load（..'部分。窗口加载事件已经触发，因此包含的代码不会执行。

如果没有一个完整的例子，很难确切知道你在尝试什么，但这里有一个快速而肮脏的jsfiddle example可能有所帮助。基于提供的代码和一堆假设。

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>

Jcrop没有在加载的图像上初始化

1 个答案: