Как сделать превью

Как сделать превью картинкиСегодня я расскажу тебе, читатель, как сделать превью картинки для фото- галереи. При разработке нового сайта я всегда стараюсь использовать собственную основу для CMS, которая идеально подходит для создания сайта- визитки компании.

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

Однако как сделать превью картинки, которое будет не уменьшенной копией оригинала, а будет содержать лишь его часть? Я решил этот вопрос путем использования imgAreaSelectjQuery-плагин для выделения области изображения.

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

После выделения требуемой области на изображении появляется кнопка «Сохранить», после нажатия на которую php-скрипт делает превью картинки и сохраняет его под тем же именем. Вуаля! Это дополнение к моей CMS сильно порадовало меня в эти выходные)

Среди входных параметров для создания области выделения есть такие полезные, как сохранение пропорций (aspectRatio), перемещение выделения (movable), изменение размера (resizable).

Для того, чтобы сделать превью картинки я использовал:

  1. Code Igniter и его стандартный класс Image Manipulation для ресайза и обрезания изображения
  2. Jquery и плагин imgAreaSelect для визуализации выбора области для того, чтобы сделать превью картинки.

Плагин imgAreaSelect прекрасно подходит для создания аватарок или превьюшек из любых изображений. Если вы зарегистрированный пользователь «ВКонтакте», то работу этого плагина можно увидеть на странице создания уменьшенного фото.

В будущем будут еще обзоры различных полезных плагинов. Если ты хочешь узнать о них больше, подпишись на RSS!

Полезная статья? Расскажите о ней своим друзьям в вашей любимой социальной сети.
Это будет лучше, чем просто "спасибо" в комментариях :)

Добавить комментарий

** Ваш email никогда не будет опубликован.