1

Jcropの実装に深刻な問題があります。Jcropの実装に関するコードを示します。

$("#crop-mini").Jcrop({
        onChange : updatePositions,
        onSelect : updatePositions,
        boxWidth : 500,
        boxHeight : 400,
        keySupport : false,
        setSelect : [0, 0, 999999, 999999],
        minSize : [10, 10]
});

ここで、＃crop-miniは<img>画像を含むタグです。updatePositions選択位置を更新する機能です。非常に簡単です：

function updatePositions(coords)
{
    $(".x").val(coords.x);
    $(".y").val(coords.y);
    $(".w").val(coords.w);
    $(".h").val(coords.h);
};

画像をアップロードし、そのURLを<img>タグに書き込み、ファンシーボックスを起動してJCropを呼び出します。ただし、選択ボックス、ブームのサイズを変更すると、次のグリッチが表示されます。

ここに画像の説明を入力してください

coords.y選択したコンテンツは、同じ画像が位置（coords現在の選択位置）からcoords.h+coords.y、およびから0に変形されているように見えますcoords.w。選択範囲を左隅にタッチすると、画像全体が表示されます。

ちなみに、トリミングは期待通りに機能し、実際の座標が渡されているので、問題は処理ではなくプレゼンテーションにあると思います。私は何か間違ったことをしましたか？

4

1 に答える 1

1

max-widthこれは、cssを設定したときに発生します。

img {
    max-width: 100%
}

次のルールを追加するだけで修正できます。

.image-version img {
    max-width: none;
}

idで.image-versionラップする要素のcssクラスはどこにありますか。<img>#crop-mini

于 2013-02-06T14:57:12.760 に答える