javascript - JCropがJavaScriptコードで機能しない

javascript jcrop

次のコードのJCropビットは機能しません。

訪問者は、ファイルinput要素を使用して自分のコンピューター上の画像を選択し、アップロードする前に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 />
答え
私はJcropの作者です。問題はあなたの要素がまだDOMに挿入されていないことかもしれません。通常、Jcropがサイズを計算するために必要です。これを行ったら、上のコードで、IDで選択する代わりに$(img)を使用することもできます。要素を挿入すると、DOMが応答するまでに少し時間がかかることがあります。そのため、すぐに要素を選択しようとすると、問題が発生することがあります。繰り返しますが、これらがあなたが抱えている問題であるかどうかは完全にはわかりませんが、それが私の最初の反応です。
関連記事

javascript - NodeJS用のRDF / XML JavaScriptコンバーターへのN-triples

javascript - javascript関数がオブジェクトの場合、なぜこれが機能しないのですか

javascript - ステートメントとImg問題について

javascript - node.jsのhttp.requestからブラウザに応答を送信する方法は?

javascript - FacebookのJS SDKから「アクション」で壁に投稿する方法

javascript - JavaScriptで画像を回転しているときの奇妙な配置の問題

javascript - ブラウザのブレットグラフ-d3.jsの代替? (ブラウザのサポートが良好)[終了]

javascript - jsを使用してテキストボックスのサイズを動的に設定する

javascript - JavaScriptの正規表現でキャプチャグループのインデックスを取得するにはどうすればよいですか?

javascript - IDでGoogleマップ(V3 JS API)マーカーを選択して操作する方法は?