4

これが私が事前に選択している方法です（この質問/回答のおかげでImageAreaSelect: aspspectRatio に関して可能な最大のサムネイルを事前に選択します）

var thwidth = $('#thumbnail').width();
    var thheight = $('#thumbnail').height();
    var aspectRatio = <?php echo $thumb_height/$thumb_width;?>;

var selWidth = 640;

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



var thumbsel = $('#thumbnail').imgAreaSelect({ 
    x1: photoWidth / 2 - maxWidth / 2,
    y1: yTop,
    x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
    y2: yTop + maxHeight,
    aspectRatio: '1:<?php echo $thumb_height/$thumb_width;?>',
    onSelectStart: function(){
        $('#filters li').first().find('a').click();
    },
    onSelectChange: preview,
    onInit: preview,
    handles: true,
    resizable:true,
    show:true 
});

しかしプレビューメソッドはInitにロードされていないようです。ユーザーは、現在の選択を再選択、サイズ変更、または少なくともドラッグして、プレビューできるようにする必要があります。

プレビュー方法（サイトから取得）

function preview(img, selection) {
    $('#filters li').first().find('a').click();
    var scaleX = <?php echo $thumb_width;?> / selection.width;
    var scaleY = <?php echo $thumb_height;?> / selection.height;

    $('#uploaded_file').css({
        width: Math.round(scaleX * <?php echo $current_large_image_width;?>) + 'px',
        height: Math.round(scaleY * <?php echo $current_large_image_height;?>) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}

私はinit関数でこれを試しました：

$('.imgareaselect-selection').mouseup();

しかしなかなか成果が出ず…

しかし、解決策は、ドラッグされた選択を再生成することか、それに似たものになると思いますか?

-編集-

このスクリーンショットをチェックアウトする場合:

ここに画像の説明を入力

事前選択が正常に行われたことがわかりますが、事前選択は行われませんでした..

選択範囲をクリック/移動するだけで、プレビューされます

ここに画像の説明を入力

したがって、質問は次のようになります。

変更された選択を再現するにはどうすればよいですか? プラグイン メソッドまたは DOM イベント経由

JSFiddle

-EDIT2-

さて、私はこの解決策を思いついたのですが、プラグインの初期化後にプレビュー機能を実行してみませんか?

var my_options = {
        x1 : photoWidth / 2 - maxWidth / 2,
        y1 : yTop,
        width : (photoWidth / 2 - maxWidth / 2) + maxWidth - photoWidth / 2 - maxWidth / 2,
        height : yTop + maxHeight - yTop
}
preview('',my_options);
4

1 に答える 1

0

選択オブジェクトを手動で構築しようとして正しい軌道に乗っていましたが、x2、y2 フィールドにデータを入力しなかったため、うまくいかなかったと思います。ページの読み込み時に表示されるプレビューの実際の例を次に示します: JSFiddle

HTML

<div class="box">
    <div align="center">
        <img src="http://funcook.com/upload_pic_r/resize_1366627050.jpg" id="thumbnail" alt="Create Thumbnail" />
            <h2>Previsualiza el resultado</h2>

        <div id="uploaded_file_holder" style="border:1px #e5e5e5 solid; float:left; position:relative; left: 44px; overflow:hidden; width:640px; height:380px;">
            <img id="uploaded_file" src="http://funcook.com/upload_pic_r/resize_1366627050.jpg" style="position: relative;" alt="Thumbnail Preview" />
        </div>
        <form method="post" action="/picture_recipe.php" class="save_recipe_image" name="thumbnail">
            <input type="hidden" id="x1" value="" name="x1" />
            <input type="hidden" id="y1" value="" name="y1" />
            <input type="hidden" id="x2" value="" name="x2" />
            <input type="hidden" id="y2" value="" name="y2" />
            <input type="hidden" id="w" value="" name="w" />
            <input type="hidden" id="h" value="" name="h" />
            <input type="hidden" value="206" id="id_recipe" name="id_recipe" />
            <input type="text" value="" id="effectApplied" name="effectApplied" style="display: none;" />
        </form>
    </div>
</div>

jQuery

function preview(img, selection) {
    $('#filters li').first().find('a').click();
    var scaleX = 640 / selection.width;
    var scaleY = 380 / selection.height;

    $('#uploaded_file').css({
        width: Math.round(scaleX * 550) + 'px',
        height: Math.round(scaleY * 412) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);
}

$(function () {
    var photo = $('#thumbnail'),
        selWidth = 640,
        aspectRatio = 0.59375,
        photoWidth = parseInt(photo.width()),
        maxWidth = Math.min(selWidth, photoWidth),
        maxHeight = Math.floor(maxWidth * aspectRatio),
        yTop = parseInt(photo.height()) / 2 - maxHeight / 2,
        selection = {
            x1: photoWidth / 2 - maxWidth / 2,
            y1: yTop,
            x2: (photoWidth / 2 - maxWidth / 2) + maxWidth,
            y2: yTop + maxHeight
        };

    selection.height = selection.y2 - selection.y1;
    selection.width = selection.x2 - selection.x1;

    var thumbsel = photo.imgAreaSelect({
        x1: selection.x1,
        y1: selection.y1,
        x2: selection.x2,
        y2: selection.y2,
        aspectRatio: '1:0.59375',
        onSelectStart: function () {
            $('#filters li').first().find('a').click();
        },
        onSelectChange: preview,
        onSelectEnd: preview,
        handles: true,
        resizable: true,
        show: true
    });

    preview(null, selection);
});
于 2013-04-28T09:52:27.747 に答える