javascript - 图像区域选择 : It wont preview the pre-selection on init

Question

这就是我预选的方式(感谢这个问题/答案 ImageAreaSelect: preselect biggest thumbnail possible respecting aspectRatio)

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();

但没有太大的成功......

但我相信解决方案是重新生成拖动的选择或类似的东西？

-编辑-

如果您查看此屏幕截图:

可以看到preselection已经成功完成了，但是prevew没有..

如果我只是点击/移动选择:然后它被预览

所以问题是:

如何重现更改后的选择？通过插件方法或 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);

Answer 1

您在尝试手动构建选择对象时走在了正确的轨道上，但我猜它不起作用，因为您没有填充 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);
});