[Angelina30]

Здравствуйте. Хочу соединить два скрипта, но в jquery плаваю.. Есть задача сделать загрузку картинок на сервер с превью в котором можно обрезать часть. Не работает кроп в превью, как я понимаю из-за того что картинка загружается после прохождения скрипта..
Кроп будет работать если изменить название класса в img или убрать класс из превью.

скрипт для кропа взят imgAreaSelect, а для превью отсюда http://d1mmmk.ru/javascript-input-file-image-preview/

<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;
 
    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });
 
    $('#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 () {
    $('.photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
jQuery(document).ready(function($){
    $('input[type="file"]').uploadPreview({
        callback: function(res){
            res.after.empty()
            if (res.img){
                res.after.append($("<br>"),$('<img>',{"Src":res.img.src, "class":("photo"), "width": (res.img.width>200)?"200":res.img.width}));
                $(this).attr('id', 'photo');
            }
        }
    })
})
 
</script>

Мини img <input type="file" name="mini_img">
<img src="output.jpg" class="photo">
<img src="output.jpg" class="photo">