ImageAreaSelec: it will not preview the preselection in init

Question

this is how I choose (thanks to this question / answer ImageAreaSelect: pre-select the maximum possible sketch, observing 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 }); 

But the preview method doesn't seem to load in Init. The user needs to reselect, resize, or at least drag the current selection so that it is viewed:

Preview Method (taken from your site)

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

I tried using the init function:

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

But with great success ...

But I believe that the solution would be to re-drag and drop or something like that?

-Edit -

If you look at this screenshot:

you can see that the pre-selection was successful, but the preface is not ..

If I just clicked / moved the selection: then it looked

So the question will be this:

How can I reproduce the selection? vía plugins or DOM events

Jsfiddle

-EDIT2 -

Well, I chose this solution, why not start the preview function after the plugin is initialized?

 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

You were on the right track trying to create a selection object manually, but I assume that this did not work because you did not fill in the x2, y2 fields. Here's a working example to display a preview when a page loads: 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); });