2

これが私が最初に試した方法です：

$('#thumbnail').imgAreaSelect({ 
    x1: 5,
    y1: 5,
    x2: $('#thumbnail').width(),
    y2: $('#thumbnail').width()*0.66,
    aspectRatio: '1:0.66'
});

しかし、トリミングされた画像の一部はオーバーフローしていません...

これにより、私が試したほとんどの画像解像度が事前に選択されているようです...

var thwidth = $('#thumbnail').width();
var thheight = $('#thumbnail').height();
aspectRatio = 0.66;

$('#thumbnail').imgAreaSelect({ 
    x1: 5,
    y1: 5,
    x2: thwidth - 80,
    y2: (thwidth - 80) * aspectRatio,
    aspectRatio: '1:0.66'
});

ただし、可能な最大値は選択されません。さらに、私には少し汚れているように見えます...

縦横比を尊重する最大の(可能であれば中央揃えの) 幅/高さの座標を選択するにはどうすればよいですか? (この場合: 1:0.66)

4

2 に答える 2

5

このコードを試してください 

        var selWidth = 500;

        var photo = $('#photo'),
           photoWidth = parseInt($('#photo').width()),
           maxWidth = Math.min(selWidth, photoWidth)
           aspectRatio = 0.66,
           maxHeight = maxWidth * aspectRatio,
           yTop = parseInt(photo.height()) / 2 - maxHeight / 2;

        $('img#photo').imgAreaSelect({
           x1: photoWidth / 2 - maxWidth / 2,
           y1: yTop,
           x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
           y2: yTop + maxHeight
        });

jsfiddleこのコードは、指定された縦横比と最大幅で中央揃えの選択領域を作成します。最大幅が画像の幅を超える場合、画像の幅をmax widthとして使用します。jquery 1.8.3 で動作することに注意してください。これは、imageareaselect プラグインが最新の jquery バージョンと互換性がないためだと思います (よくわかりません)。

アップデート

高さオーバーフローとアスペクト比 > 1のケースを含めるようにコードを改善しました。これがすべての条件で機能することを願っています:) 

        var selWidth = 350;

        var photo = $('#photo'),
           photoWidth = parseInt($('#photo').width()),
           photoHeight = parseInt($('#photo').height()),
           maxWidth = Math.min(selWidth, photoWidth),
           aspectRatio = 0.66,
           maxHeight = maxWidth * aspectRatio;

        if (maxHeight > photoHeight) {
           maxHeight = photoHeight;
           maxWidth = maxHeight * ( 1 / aspectRatio);
        }

        var yTop = photoHeight / 2 - maxHeight / 2;

        $('img#photo').imgAreaSelect({
           x1: photoWidth / 2 - maxWidth / 2,
           y1: yTop,
           x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
           y2: yTop + maxHeight
        });
于 2013-04-17T11:36:59.330 に答える
3

私はこの小さなフィドルを用意しました。Ejay よりも少し時間がかかりましたが、視覚的なデモンストレーションを含めました。

親指の位置と幅を計算したら、それは簡単なことと言えます。(フィドルの変数名を使用)

$('#thumbnail').imgAreaSelect({ 
    x1: thumbX,
    y1: thumbY,
    x2: thumbX+thumbW,
    y2: thumbY+thumbH,
});
于 2013-04-17T11:58:42.133 に答える