Фиксированный размер выделенной области.

Не как не получается, вот снял видео

 

Благодарю за совет, попробую, отпишу.

Добавлено спустя 11 минут 9 секунд:

Код (PHP):

1.   <script type="text/javascript">
2.    var arr = "<?=$avatar_new?>";
3.     $(document).ready(function(){
4.             $(".knopka").click(function(){
5.             var cliked = this.id.split('-');
6.             var arr = cliked[1] ;
7.             $('#photo + div img')[0].src = "photo/" + arr;
8.             document.getElementById('arr').value="photo/" + arr;
9.          
10.             });
11.             });
12.    
13.            
14.         </script>

Присваиваю значение переменной, но значение не присваивается.

 

Фух, получилось=) Спасибо за советы.
В crop.php

Код (PHP):

1. if(empty($_POST['arr'])){
2.  
3. $filename ="photo/" . $_SESSION['avatar'];
4. unset($_SESSION['avatar']);
5.  
6. }else{
7. $filename = $_POST['arr'];
8. echo $filename;
9. unset($_SESSION['avatar']);
10. }
11.  
12.  
13. $random = rand(1,100000000);
14.  
15. $new_filename = "photo/" . $random . ".jpg";
16.  
17. // Get dimensions of the original image
18. list($current_width, $current_height) = getimagesize($filename);
19.  
20. // The x and y coordinates on the original image where we
21. // will begin cropping the image, taken from the form
22. if(empty($_POST['x1'])){
23. $x1    = "1";
24. $y1    = "1";
25. $x2    = "152";
26. $y2    = "202";
27. $w    = "150";
28. $h    = "200" ;
29. }else{
30. $x1    = $_POST['x1'];
31. $y1    = $_POST['y1'];
32. $x2    = $_POST['x2'];
33. $y2    = $_POST['y2'];
34. $w    = $_POST['w'];
35. $h    = $_POST['h'];     
36. } 

Остался последний вопрос. Данные, для кропа, как я понимаю, берутся в этой функции

Код (PHP):

1. function preview(img, selection) {
2.     var scaleX = 150 / (selection.width || 1);
3.     var scaleY = 200 / (selection.height || 1);
4.     $('#photo + div > img').css({
5.         overflow: 'hidden',
6.         width: Math.round(scaleX * 600) ,
7.         height: Math.round(scaleY * 400) ,
8.         marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
9.         marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
10.          
11.     });
12. }  

каким образом мне скрыть превью? Т.к. на разных изображениях искажается картинка.

 

Чтобы выдранная область не отображалась в отдельном изображении, предпросмотр, а была скрыта. Установил свойство visibility:'hidden',.
Столкнулся с другой проблемой. Почему именно в google chrome не срабатывает javascript, именно кропа, когда заливаю на сервер. На localhost'e все нормально работает. Не срабатывает, нет области выделения.

 

Странно, все каким-то мифическим образом заработало. Ничего не изменял. Хотел посмотреть ошибки, залил на сервер, все работает. Если повторится, тогда отпишу. Спасибо Вам denis01 за помощь.