ImageAreaSelec：它不会在初始化时预览预选

Posted 2023-02-25

【中文标题】ImageAreaSelec：它不会在初始化时预览预选

【英文标题】：ImageAreaSelec: It wont preview the pre-selection on init

【发布时间】：2013-04-19 13:35:05

【问题描述】：

这就是我预选的方式（感谢这个问题/答案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();

但是没有多大成功...

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

-编辑-

如果您查看此屏幕截图：

可以看到预选成功了，但是预选没有..

如果我只是单击/移动选择：那么它会被预览

所以问题是：

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

【问题讨论】：

你能在jsfiddle上提供一个例子吗？

提供 jsfiddle 对我来说有点复杂，因为我只是在上传图片后才实现的。我准备了一个丑陋的，在那里你可以看到一个错误的选择（尽管拖动指示器不可见。我不太确定为什么），你可以看到，直到你拖动第一张图片，第二张图片不会更新.我想重现这个，但我没有在插件文档中看到它的方法......有什么想法吗？ jsfiddle.net/QyVy6/7

我认为这没有问题：link

嗨！感谢您抽出宝贵时间，请检查我添加到问题编辑中的屏幕截图。出于某种原因，我制作的 jsfiddle 中看不到选择方格

很抱歉，我不明白问题出在哪里。在我提供给你的链接上，我看到的是它预览成功，如果我点击它，它不会改变，因为它已经在正确的位置预览了。

【参考方案1】：

您在尝试手动构建选择对象时走在正确的轨道上，但我猜它不起作用，因为您没有填充 x2、y2 字段。这是页面加载时显示预览的工作示例：JSFiddle

html

<div class="box">
    <div align="center">
        <img src="http://funcook.com/upload_pic_r/resize_1366627050.jpg" id="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;"  />
        </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);
);