0

私が取り組んでいるアプリケーションを使用すると、ユーザーはビューポートに無制限の数の画像を追加できます。これらの画像では、サイズ変更、ドラッグ、回転、トリミングなどの一連の操作が可能です。トリミング機能には、Jcropプラグインを使用しています。

トリミング用のコントロールアイコンをクリックすると、ライトボックスが表示され、選択した画像が表示され（<img>要素は同じで、src属性値のみが毎回変更されます）、ユーザーは画像をトリミングできます。切り抜きアイコンがクリックされたときにトリガーされる関連イベントハンドラーは次のとおりです。

$(document).on("click", "div.cropper", function(){

            var ctrl = $(this),
                ref = ctrl.attr("reference"),
                obj = returnObj(objects,ref),
                target = $("#crop-target")
                crop_params = {};

            target.attr("src",obj.src);
            target.Jcrop({
                onSelect: function(c){
                    crop_params = c;
                }
            });
});

上記のコードを考えると、トリミングは完全に機能しますが、最初の画像でのみ試してみます。その後、他の画像の「クロッパー」アイコンをクリックすると、最初の画像が表示されます。

この問題を回避するにはどうすればよいですか？

PS：Jcropに関する既存の質問を検索しましたが、特定の問題に対する答えが見つかりませんでした。

4

1 に答える 1

0

新しい img タグを作成し、それで jCrop を開始するだけです。

$('#parent_tag #img_to_crop').remove();
$('#parent_tag').html('<img id="img_to_crop"></img>');
$('#parent_tag #img_to_crop').Jcrop({ options ... });
于 2016-04-07T16:48:43.517 に答える