1

写真操作に jQuery 用のJcropプラグインを使用しています。最終的に Firefox と IE8 で正常に動作するようになりましたが、Chrome と Safari で奇妙な動作が発生しています。

Jcropコード

var api;
$(window.load(function() {
    var orimg = $('#image1');
    //Create Image to get dimensions of full size photo
    var pic = $('<img>').attr('src', orimg.attr('src')).css('display', 'none').appendTo('#form1');
    var h = pic.height();
    var w = pic.width();

    //set defaults for jcrop
    var opt = {
        aspectRatio: 1,
        onSelect: storeCoords, 
        onChange: storeCoords, 
        trueSize: [w, h], //actual size of pic vs. styled size on page
        bgColor: '#EEEEEE',
        bgOpacity: .7,
        setSelect: [150, 150, 50, 50]
    };

    $('#crop_button').click(function() {
        //initialize jcrop
        api = $.Jcrop(orimg, opt);
    });

    $('#cancel_button').click(function() {
        api.destroy();
    });

});

function storeCoords(c) {
    $('#X').val(c.x);
    $('#Y').val(c.y);
    $('#W').val(c.w);
    $('#H').val(c.h);
}

storeCoordsもともと、関数が呼び出されたときに座標が格納されていないと思っていました。storeCoordsただし、何が起こっているかを確認するために、関数に次のコードを追加しました。

var msg = '';
$.each(c, function(index, value) {
    msg += index + ':' + value + ' ';
});
$('#debug_output').html(msg + '<br />');

Firefox と IE では、クロップ ボックスのサイズ変更/移動ごとに座標が出力されます。Chrome/Safari (onChange:プロパティを使用する場合) では、1 行の正しいデータを取得しますが、そのデータをゼロで上書きします。

  • x:50 y:50 x2:150 y2:150 w:100 h:100
  • x:50 y:50 x2:150 y2:150 w:100 h:100
  • x:0 y:0 x2:0 y2:0 w:0 h:0 x:0 y:0
  • x2:0 y2:0 w:0 h:0 x:0 y:0 x2:0 y2:0
  • w:0 h:0 x:0 y:0 x2:0 y2:0 w:0 h:0
  • x:0 y:0 x2:0 y2:0 w:0 h:0

プロパティを単独で使用すると、onSelect:すべてゼロになります (Chrome/Safari)

だから、なぜ彼らが値を呼び出したり上書きしたりするのか、私は途方に暮れています。

編集

$(function(){})代わりに使用するようにコードを更新しましたが$(window).load(function(){})、同じ結果が発生しています。同じ結果が得られるデモ ページを作成しました。これが Jcrop のバグなのか、それとも私が行っていることなのかはわかりません。プロパティを指定した場合にのみ発生しtrueSizeます。プラグインの縮小されていないバージョンは、ここで表示できます。

4

3 に答える 3

1

一部のブラウザで奇妙な動作を引き起こしているダブルバウンドイベントが発生している可能性があると思います。$(window.load(function () { ... }))試してみる代わりに$(function () { ... })。

于 2011-01-13T18:39:19.313 に答える
0

プラグインのバグになるまでこれをチョークします。Googleコードでプロジェクトにバグレポートを送信しました。暫定的なスタイル設定ではなく、バックエンドコードを使用して画像のサイズを変更することにしました。提案をありがとう、バグについて返事があればこれを更新します。

于 2011-01-14T01:05:23.487 に答える