2

わかりましたので、以下のコードの JCrop ビットは機能しません。

訪問者はファイル入力要素を使用してコンピューター上の画像を選択し、画像がアップロードされる前に img タグに表示されます。次に、訪問者は JCrop を使用して、アップロードする画像の部分を選択します。アップロードしたら、サーブレットを使用して画像をトリミングし、データベースに保存します。

アイデアはありますか？ありがとう

ヘッダーの 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 />
4

1 に答える 1

2

私はJcropの作者です。問題は、要素がまだ DOM に挿入されていないことだと思います。通常、Jcrop がサイズを把握するためにそこにある必要があります。そうしたら、上記のコードで$(img)、ID による選択の代わりに を使用することもできます。要素を挿入すると、DOM が応答するまでに少し時間がかかることがあるため、直後に選択しようとすると問題が発生することがあります。繰り返しますが、これらがあなたが抱えている問題であるかどうかは完全にはわかりませんが、それが私の最初の反応です.

于 2011-08-30T23:26:40.120 に答える