JCrop 在我的 JavaScript 代码中不起作用

Posted 2023-02-25

【中文标题】JCrop 在我的 JavaScript 代码中不起作用

【英文标题】：JCrop will not work in my JavaScript code

【发布时间】：2011-08-30 21:42:35

【问题描述】：

好的，下面的 JCrop 代码不起作用。

访问者使用文件输入元素在他们的计算机上选择一个图像，然后在上传之前显示在一个 img 标记中。然后访问者使用 JCrop 来选择他们想要上传的图像的哪一部分。上传后，我将使用 servlet 裁剪图像并将其保存在数据库中。

有什么想法吗？谢谢

标头中的 javascript：

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="tapmodo-Jcrop-5e58bc9/js/jquery.Jcrop.js"></script>
    <link href="tapmodo-Jcrop-5e58bc9/css/jquery.Jcrop.css" rel="stylesheet" type="text/css"/>
    <script>
        <!--
        $(document).ready(function () 
            $("#previewInput").change(function(e) 
                var file = e.originalEvent.srcElement.files[0];
                var img = document.createElement("img");
                var reader = new FileReader();
                reader.onloadend = function() 
                    img.src = reader.result;
                    img.id = 'previewimg';
                reader.readAsDataURL(file);
                $("#preview").html('Please crop your image below:<br />');
                $("#preview").append(img);
                setTimeout(1250);
                $('#previewimg').Jcrop(
                    aspectRatio: 1,
                    onChange: setCoords,
                    onSelect: setCoords
                );
            );
        );

        function setCoords(c)
        
            $('input[name=x1]').val(c.x);
            $('input[name=y1]').val(c.y);
            $('input[name=x2]').val(c.x2);
            $('input[name=y2]').val(c.y2);
        ;
        -->
    </script>

正文中的 HTML：

            <h1>Thanks for registering!</h1>
            Upload a display picture:<br />
            <div id="upload">
                <form action="crop" method="post" enctype="multipart/form-data" >
                    <input id="previewInput" type="file" name="image"/><br />
                    <input type="hidden" name="x1" value=""/>
                    <input type="hidden" name="y1" value=""/>
                    <input type="hidden" name="x2" value=""/>
                    <input type="hidden" name="y2" value=""/>
                    <input type="submit" name="submit" value="Upload and crop image"/><br />
                </form>
                <div id="preview"></div>
            </div>
            <a href="">Or click here to view your account and keep the default image</a><br />

【问题讨论】：

我今天遇到了同样的问题。当我尝试另一个浏览器时，我挣扎了大约一个小时。默认情况下，我使用 Chrome Canary 并没有发生任何事情。当我在 Chrome 中尝试相同的代码时，它起作用了：P

你是怎么解决这个问题的？

【参考方案1】：

我是 Jcrop 的作者。我认为问题可能是您的元素尚未插入 DOM。 Jcrop 通常需要它来计算大小。这样做后，在上面的代码中，您还可以尝试使用 $(img) 而不是按 ID 进行选择。有时当你插入一个元素时，DOM 需要很短的时间来响应，所以尝试在之后立即选择它有时会导致问题。同样，我不完全确定这些是否是您遇到的问题，但这是我最初的反应。

【讨论】：

我尝试使用 $(img) 代替 ID，但这没有任何区别。我试过使用“setTimeout(1250);”所以 DOM 有时间做出响应，我想这不是一个很好的方法，但它是我能想到的唯一方法。但是，这也不起作用。我怎样才能让它在运行 JCrop 代码之前等待一秒钟？感谢您的帮助

这方面有进展吗？