Главная | Новости | Блог | Ответы | Учебник | Правила |
Вы здесь: ГлавнаяУчебникОбработка картинок
Вход | Регистрация
Обработку картинок на сайте логически можно разделить на четыре этапа:
1. создание картинок, накладываемых на изображение;
2. настройка правил обработки картинок;
3. привязка обработчика картинок к форме;
4. автоматическая обработка картинки при загрузке ее на сайт.
Этап первый.
Прежде чем приступать к обработке картинок необходимо определиться с их оформлением. Чаще всего, обработка картинки обуславливается двумя моментами: подгон картинки под дизайн и необходимость защитить картинку от воровства.
В графическом редакторе, работающем с альфа каналом (полупрозрачные картинки, прозрачный задний фон), создайте все необходимые картинки. Лучше всего сохранять картинки в формате "png24". Название файлов на русском языке недопустимо. На этих картинках может быть все, что угодно: адрес сайта, логотип, рамочка и т.д. Подготовленные картинки загрузите на сайт в папку pic с помощью файлового менеджера или ftp.
Этап второй.
Зайдите в конструктор в раздел автоматической обработки картинок. Создайте новое правило обработки. Обратите внимание, что правила обработки - это не текущая обработка картинок, а набор инструкций для обработки картинок, загружаемых через формы.
После создания нового правила перейдите к заполнению инструкций. Нажмите "Добавить действие". Выберите "Открыть загружаемый файл". Эта инструкция не содержит параметров. Она отвечает за открытие файла, загруженного через форму в память сервера. После выполнения этой инструкции в памяти будет находиться картинка, которую мы (или другой пользователь сайта) только что загрузили через форму. И с этой картинкой компьютер может выполнять дальнейшие инструкции. В таблице с действиями появится название образа картинки в памяти, описание действия и возможность редактировать, удалять и перемещать данное действие.
Чтобы задать следующую инструкцию для обработки картинки, нажмите "Добавить действие".
Самая частая инструкция - это изменение размера картинки. Вы (или пользователь) можете загружать на сайт картинки любого размера, а данная инструкция будет изменять их под нужный размер, обусловленный дизайном.
Нажмите "Изменить размер".
В поле "Редактируемая картинка" выбираем имя образа, который хотим изменить. Указываем новую ширину и высоту и выбираем "Способ изменения размера". Нажимаем "Сохранить".
В списке инструкций появится еще одна инструкция. В названии будет имя уже нового (измененного) образа картинки, а в описании - инструкция, которая приведет к появлению этого образа.
Для того чтобы наложить на эту картинку наше оформление (например, логотип), необходимо открыть с сайта картинку, подготовленную на этапе первом. Нажмите "Открыть файл" и напишите адрес файла, начиная с корня Вашего сайта. Если Вы залили файлы в папку pic, то надо написать "pic/названиефайла.png".
Теперь инструкция по наложению этой картинки на загружаемую картинку.
Нажмите "Наложить".
Выберите название образа, на который накладывать и название образа накладываемой картинки. Выберите тип наложения: относительный, абсолютный, замостить. Чаще всего выбирается относительный, который позволяет наложить логотип относительно основной картинки: по углам, по сторонам, в центре. При относительном типе наложения в полях "Позиция X", "Позиция Y" укажите цифры -1, 0 или 1. При абсолютном укажите в пикселях координаты смещения от левого верхнего угла картинки. При типе "замостить" не важно, что Вы напишете, картинка будет заполнять все пространство. Обратите внимание, что в списке инструкций имя образа такое же, как имя образа, на который мы накладываем изображение.
Теперь у нас в памяти хранится загруженная картинка, картинка с логотипом и картинка, полученная из исходной картинки методом изменения размера и наложения логотипа.
Результат работ нужно сохранить в файл. Добавьте действие "Сохранить в файл". Выберите имя сохраняемого образа, тип файла jpg, png, gif (чаще всего для фотографий используется jpg) и укажите название файла. Особо остановимся на названиях файлов.
В названии файлов поддерживаются переменные. {id} - идентификатор изображения. Это целое число, начинающееся с единицы и автоматически присваиваемое каждой новой загружаемой картинке.
{ext} - расширение типа файла .jpg, .png, .gif Расширение определяется на основании того типа, который мы выбрали выше. Вы можете добавлять в этот шаблон названия файла свои буквы и цифры. После переменной {ext} ничего вставлять нельзя.
Примеры правильных названий: small{id}{ext}, {id}big{ext}, foto{id}s{ext}
Примеры неправильных названий: {id}{ext}small, picture.jpg, картинка.jpg, {id}маленькая{ext}, {id}.{ext}, {ext}{id}
После сохранения этого действия в списке инструкций появится инструкция на сохранение картинки. В описании инструкции будет написана часть названия переменной, которая будет содержаться в шаблоне для вывода этой картинки.
Этап третий.
При создании формы добавьте поле для загрузки картинок. Для этого в "Тип поля" выберите "Картинка с обработкой", а в дополнительном поле к типу укажите название инструкции для обработки картинок.
В шаблоне вывода данных укажите переменную этой картинки. Название этой переменной доступно на странице формирования шаблонов.
Этап четвертый.
Формы, в которых используются поля "Картинка с обработкой" при отправке автоматически обрабатываются. Загруженные картинки преобразуются по созданным инструкциям и сохраняются на сайте.
При выводе данных на сайте отобразится адрес этой картинки. Для того чтобы вывести саму картинку или ссылку для скачивания этой картинки, используйте в шаблонах html тэги <img/> и <a></a>.
Важно! Вы не можете указывать названия картинок. Все они формируются автоматически. Это защита от ошибок пользователей, которые могут добавить файлы с неправильными названиями, неправильных форматов и не в те папки.
Над одной загруженной картинкой можно производить сколько угодно действий, т.е. из одной картинки можно сделать несколько вариантов и использовать их в разных форматах выводов.
Особенность! При изменении размера и использовании полупрозрачной подложки не сохраняется альфа канал. т.е. нельзя на полупрозрачную картинку накладывать сверху и нельзя изменять размер прозрачных картинок.

В системе имеется возможность автоматического преобразования картинок при просмотре данных, а не при их добавлении, но использовать обработку в таком режиме не рекомендуется, т.к. это нагружает сервер.
О нас | Написать нам | Сообщить о правонарушении |

Создать свой сайт © Конструктор сайтов Letnick.com 2006-2017