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需要花费很少的时间来响应，因此尝试在有时会立即选择它会导致问题。同样，我不完全确定这些是你遇到的问题，但那是我最初的反应。

JCrop不适用于我的JavaScript代码

1 个答案: