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

Question

好的，下面的 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 />

Answer 1

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