Crop + превью изображения

[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">

[laimas]

А как можно сделать обрезку изображения ни видя его, то есть выставляя маркеры на нем, ограничиваем область которую и видим, что собственно это и есть предпросмотр. Или же нужно нечто иное?

[Angelina30]

вот так надо:


мне нужно координаты кропа передавать в php файл для обрезки и сжатия

Вообще может есть какой-нибудь готовый плагин кропа без ограничений по объему загружаемого файа и не портящий качество (попадаются только сильно искажающие ...)? Делаю админку для клиентов, а они любят совать файлы весом мегабайт этак 12-20.

Вообще ориентир идет на загрузку и обрезку изображении как вконтакте для автарки

[laimas]

Если речь идет об аватарке, то есть смысл запретить загрузку файлов размером более 1000х1000.

О каком искажении речь я не понял, есть понятие качества на выходе, но судя по тому, что вы только лишь задаете координаты на клиенте, а операции с файлом выполняет сервер, то качество напрямую будет зависеть от размера исходного изображения, чем оно больше, тем хуже качество на выходе.

Если бы эти операции производились на клиенте, тогда всему виной был бы canvas, который использует не самый лучший метод интерполяции, следствием чего получаем зазубрины на фото. О причинах этого и как обходят можно почитать тут.

Теперь о сервере. Надо полагать речь идет об ограничении размера файла, но это не вина плагинов и браузеров, это ограничение накладывается сервером - максимальный размер файла разрешенный для загрузки. Какой он можно узнать в настройках своего хоста. Полита в отношении этого параметра у хостеров различна, у кого-то в панели управления можно изменить, кто-то разрешает посредством .htaccess изменять этот параметр, кто-то не разрешает изменять жестко установленное значение. Но даже разрешая его изменять, будет установлен верхний предел. Более того, если речь идет об изображениях и операциях с ними, то прежде чем увеличивать размер для загрузки, необходимо обратить внимание на размер памяти имеющейся в распоряжении, ибо для того чтобы обрезать, изменить размер изображения, потребуется объем памяти грубо равный ширине изображения умноженной на его высоту и помноженной на 5, плюс размер для ресурса в который будет помещаться результат преобразований.

Эти параметры сервера нужно передавать клиенту на страницу в которой производится обрезка фото. А так как таковую операцию удобно производить с использованием Ajax (возвращает результат операции клиенту для просмотра), то и запрашивать их нужно асинхронным запросом. Сервер должен отдать следующее:

exit(
    json_encode(
        array(
            'post' => ini_get('post_max_size')+0, //макс. размер POST данных, МБ
            'size'  => ini_get('upload_max_filesize')+0, //макс. размер файла для загрузки, МБ
            'mem' => intval((ini_get('memory_limit')+0)/100)*100 //доступный объем памяти, МБ 
        )
    )
);

Если "mem" возвращает 0, значит ограничений нет (что скорее исключение, чем правило). Желательно этот параметр сразу урезать на N мегабайт, чтобы оставить запас.

На клиенте при выборе файла пользователем проверять параметры выбранного файла на соответствие "size" (files[0].size выбранного файла) и "mem" (по событию загрузки файла рассчитать по его ширине и высоте размер памяти, который потребуется на сервере для его обработки, здесь же можно ограничить разрешенное для загрузки разрешение файла).

Установка координат при обрезке должна учитывать масштабирование изображения на клиенте, если оно есть. Если разрешение изображения для аватарки ограничить разумным пределом, то это не обязательно.

На сервере тоже свои особенности. К примеру, лучше с изображениями работает ImageMagick. GD же более прожорлив по расходу памяти, и по качеству. Дело в том, что по умолчанию в нем как и в canvas на клиенте не лучшая интерполяция применяется. Для аватарки, которая размером не большая, можно при сохранении выбрать качество не по умолчанию, равное 75 (речь о формате JPEG), а 90. Начиная с версии РНР 5.5.0 появились функции imagecrop и imagescale, которые упрощают процесс обрезки и уменьшения фото, а самое главное можно применить более продвинутые методы интерполяции и фильтры:

IMG_BELL - фильтр Белла (полосовой фильтр с колоколообразной характеристикой)
IMG_BESSEL - фильтр Бесселя (линейный фильтр, спектр на выходе фильтра в полосе пропускания сохраняется практически неизменным)
//два варианта ниже, это интерполяция по умолчанию и не лучшая
IMG_BICUBIC - бикубическая (последовательная кубическая интерполяция), бикубическая (гладкая функция) дает более качественное изображение по сравнению с билинейной интерполяцией (значение функции в искомой точке вычисляется через ее значения в 16 соседних точках)
IMG_BICUBIC_FIXED - бикубическая с фиксированной точкой (единожды найденные коэффициенты используются для многократного вычисления интерполированного значения функции в произвольных точках квадрата)
IMG_BILINEAR_FIXED - билинейная (интерполяции методом ближайшего соседа) с фиксированной точкой (по умолчанию (также на создания нового ресурса))
IMG_BLACKMAN - функция Блэкман, определяет количество и ширину перехода, которая происходит во время фильтрации (муар, резкость)
IMG_BOX - кубическое размытие
IMG_BSPLINE - Сплайн-интерполяция
IMG_CATMULLROM - фильтр, подчеркивающий края (увеличение резкости)
IMG_GAUSSIAN - функция Гаусса (сглаживание, размытие)
IMG_GENERALIZED_CUBIC - обобщенные кубический сплайн, фрактальная интерполяция
IMG_HERMITE - интерполяции Эрмита (смешивание)
IMG_HAMMING - Хэмминга фильтр (удаление шумов)
IMG_HANNING - Хеннинга фильтр (удаление шумов)
IMG_MITCHELL - Митчелл фильтр (подчеркивание краев)
IMG_POWER - усиление
IMG_QUADRATIC - обратная квадратичная интерполяция
IMG_SINC - подавление спектре выше частоты среза, на выходе низкочастотная полоса спектра
IMG_NEAREST_NEIGHBOUR - интерполяции методом ближайшего соседа
IMG_WEIGHTED4 - весоизмерительный фильтр
IMG_TRIANGLE - треугольная интерполяция

Используя Ajax в процессе обрезки и передавая изображение на сервер тоже посредством Ajax, можно получать результат процесса как ссылку на сохраненное на сервере изображение, что и будет предварительным просмотром. Нужно только следить за тем, чтобы такие изображения удалялись, если клиент покинул страницу. Но это можно сделать и иначе, не записывая изображение в папку на сервере, записывать результат в сессию, отдавая его для просмотра скриптом по запросу клиента. А сохранять в папку только при запросе клиента "Сохранить". Тогда и мусор будет удаляться автоматически сборщиком мусора.