2

JCropを使用して画像を切り抜こうとしています。しかし、結果はイライラするほど間違っており、理由はわかりません。私は画像アップローダーを持っています。誰かが画像を選択すると、JavaScriptが、新しくアップロードされた画像と一致するように、ページ上にすでにある画像のソースを変更します。私はそれからこのコードを持っています：

$('#myForm').ajaxForm({
    dataType: 'json',
    success: function (result) {
        $("#image-editor-preview img")
            .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
                        .Jcrop({
                            aspectRatio: 1,
                            setSelect: [100, 100, 50, 50],
                            minSize: [160, 160],
                            maxSize: [160, 160],
                            onChange: setCoords,
                            onSelect: setCoords
                        });
    }
});

var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
    x = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};

ただし、これが発生します。

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

私はこれを修正するためにかなりの試みをしましたが、最終結果は常に同じです。誰かアイデアはありますか？ありがとう。

4

3 に答える 3

7

私も同じ問題を抱えていましたが、なぜそうなるのかを知りました。

私のcssファイルには次のコードがあります：

img {
    width:  100%;
    height: auto;
    border: none;
}

この定義から幅と高さを削除すると、プラグインが正しく機能し始めました。

于 2012-06-26T12:34:49.473 に答える
5

私はそれを理解することができました。Twitterブートストラップモーダル内のJCropには、JCropボックスの幅に問題があることがわかりました。twitterブートストラップモーダルは、JCropcss内のCSSをオーバーライドしています。これが起こらないようにするには、JCropのCSSを変更する必要がありました。

于 2012-07-27T17:03:17.970 に答える
0

Jcropのドキュメントによると、実際にはトリミングは行われません。画像トリミングUIのみを作成します。次に、実際のトリミングを行うサーバーに依存します。http://deepliquid.com/content/Jcrop_Implementation_Theory.htmlを参照してください。したがって、プラグインは設計どおりに動作しているように見えます。彼らが示すように、それはあなたがサーバー上であなた自身をするためにあなたが残りを残している。

于 2012-05-10T23:08:50.550 に答える