这就是我预选的方式(感谢这个问题/答案ImageAreaSelect: preselect最大的缩略图可能尊重 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();
但是没有太大的成功...
但我相信解决方案是重新生成拖动的选择或类似的东西?
-编辑-
如果您查看此屏幕截图:
可以看到预选成功了,但是prevew没有..
如果我只是单击/移动选择:然后预览
所以问题是:
如何重现更改的选择?通过插件方法或 DOM 事件
-编辑2-
好吧,我提出了这个解决方案,为什么不在插件初始化后运行预览功能?
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);