Скрипт редактирования изображения на JavaScript (поворот, кадрирование)
Доброго времени друзья! В рамках работы над расширением функционала CMS разрабатываемой на безе моего фреймворка, я написал скрипт для быстрого редактирования изображений, в тех разделах сайта где идет непосредственная работа с ними(новости, статьи, галерея и т.д). Скрипт позволяет, после загрузки изображения на сайт(на лету, по средствам Ajax) совершить над ним определенные действия: поворот, кадрирование(произвольное обрезание по заданным границам) и масштабирование. Данное решение было написано за неимением других готовых подходящих альтернатив(те что удалось найти были либо слишком громоздки, либо ущербны, как ни странно). Основное преимущество скрипта, это то, что его можно установить на любой сайт работающий на любом движке. Например, после успешного тестирования на моей CMS, затем он был интегрирован на форум под управлением Invision Power Board(от же Invision Comminity). Далее обо всем по порядку.
Возможности
Как вы уже, кое что поняли из введения, скрипт обладает следующими возможностями:
- Поворот изображения на 90, 180, 270 градусов;
- Кадрирование, обрезание фото по заданным рамкам;
- Масштабирование, уменьшение или увеличение в момент кадрирования;
- Все операции производятся без перезагрузки страницы, отредактированное фото сохраняется на сервере путем отправки данных Ajax на PHP скрипт, отвечающий за сохранение файла и работу с базой данных (если потребуется);
- Интеграция с любым сайтом, на любом движке (при заказе работы у меня, также напишу скрипт обработчик сохраняющий изображения, на PHP, для работы именно с вашей CMS и БД, т.е. полная интеграция); В том числе возможна интеграция с галереями, загрузчиками файлов, файл менеджерами, редакторами страниц.
- Отображение информации о редактируемом изображении: название, тип, размер, разрешение;
- Адаптивный дизайн, поддержка мобильных устройств.
Скриншоты
При загрузке фото, добавлена возможность его редактирования (на примере движка IPB)
Отображение всплывающего окна редактирования фото
Вращение изображения на 90 градусов
Технологии
Скрипт написан на JavaScript и jQuery, для редактирования используется Сanvas;
CSS 3, HTML 5;
Библиотеки jQuery 1.12, cropper.js;
Адаптивный дизайн;
PHP 5.6 >, PDO;
Интегрируется с любой CMS.
Заключение
В дальнейших планах добавить еще ряд функций, таких как работа с цветовыми каналами и фильтрами. Решение получилось легким, как в плане скорости работы так и размера кода. Однозначно он войдет в комплект всех моих текущих и будущих проектов. Если вас заинтересовало данное решение, обращайтесь! Буду рад сотрудничеству…
Похожие записи
Оставить комментарий
Full Stack
Senior, Architect
предложить оффер
- jQuery: как получить значение атрибута?
- Интеграция с API ОСАГО сайта sravni.ru
- PHP работа с изображением, класс SimpleImage
- Комментарии на PHP, Ajax, mySQL
- PHP: Категории бесконечного уровня вложенности.
- Nginx редирект на другой сервис с сохранением URL спросил (а) Сергей
- Исполнитель пропал, почему такое случается и понять с кем работать? спросил (а) Артем
- Можно ли WordPress считать универсальным движком? спросил (а) Андрей
- Что такое самописный скрипт или CMS? спросил (а) Антон
- Как при поиске в linux используя grep, добавить исключения? спросил (а) Алексей
- Как создать Telegram-бота с авторизацией через сайт к записи
- PHP скрипт: каталог закладок на сайты к записи
- Валидация на PHP к записи
- Сколько зарабатывают в бизнесе на совместных покупках к записи
- Сколько зарабатывают в бизнесе на совместных покупках к записи
- Подключение(интеграция) приема платежей WeChat Pay на сайте к записи
- Интеграция Тинькофф банк Эквайринг на сайт для приема платежей к записи
Archive
- +2024 (7)
- Сентябрь 2024 (1)
- Август 2024 (5)
- Май 2024 (1)
- +2023 (27)
- Ноябрь 2023 (1)
- Октябрь 2023 (13)
- Сентябрь 2023 (10)
- Апрель 2023 (1)
- Март 2023 (1)
- Февраль 2023 (1)
- +2022 (21)
- Декабрь 2022 (11)
- Ноябрь 2022 (1)
- Май 2022 (2)
- Апрель 2022 (2)
- Март 2022 (3)
- Февраль 2022 (1)
- Январь 2022 (1)
- +2021 (17)
- Декабрь 2021 (5)
- Ноябрь 2021 (2)
- Июль 2021 (1)
- Июнь 2021 (2)
- Май 2021 (5)
- Апрель 2021 (1)
- Март 2021 (1)
- +2020 (20)
- Декабрь 2020 (6)
- Сентябрь 2020 (2)
- Август 2020 (1)
- Июль 2020 (2)
- Май 2020 (2)
- Апрель 2020 (2)
- Март 2020 (2)
- Февраль 2020 (1)
- Январь 2020 (2)
- +2019 (18)
- Декабрь 2019 (3)
- Ноябрь 2019 (2)
- Октябрь 2019 (2)
- Сентябрь 2019 (1)
- Август 2019 (2)
- Июль 2019 (1)
- Июнь 2019 (1)
- Апрель 2019 (2)
- Март 2019 (1)
- Февраль 2019 (3)
- +2018 (44)
- Декабрь 2018 (4)
- Ноябрь 2018 (7)
- Октябрь 2018 (8)
- Сентябрь 2018 (1)
- Август 2018 (4)
- Июль 2018 (5)
- Май 2018 (3)
- Апрель 2018 (7)
- Март 2018 (1)
- Февраль 2018 (2)
- Январь 2018 (2)
- +2017 (19)
- Декабрь 2017 (2)
- Ноябрь 2017 (1)
- Октябрь 2017 (1)
- Сентябрь 2017 (2)
- Июль 2017 (1)
- Июнь 2017 (1)
- Май 2017 (2)
- Апрель 2017 (3)
- Март 2017 (2)
- Февраль 2017 (1)
- Январь 2017 (3)
- +2016 (36)
- Декабрь 2016 (3)
- Ноябрь 2016 (3)
- Октябрь 2016 (2)
- Сентябрь 2016 (3)
- Август 2016 (7)
- Июнь 2016 (3)
- Май 2016 (3)
- Апрель 2016 (3)
- Февраль 2016 (1)
- Январь 2016 (8)
- +2015 (36)
- Ноябрь 2015 (5)
- Октябрь 2015 (4)
- Сентябрь 2015 (1)
- Август 2015 (8)
- Июнь 2015 (1)
- Май 2015 (4)
- Апрель 2015 (8)
- Март 2015 (3)
- Февраль 2015 (2)
- +2014 (26)
- Ноябрь 2014 (2)
- Октябрь 2014 (5)
- Сентябрь 2014 (6)
- Июль 2014 (1)
- Июнь 2014 (2)
- Май 2014 (3)
- Апрель 2014 (6)
- Февраль 2014 (1)
- +2013 (27)
- Декабрь 2013 (2)
- Ноябрь 2013 (1)
- Октябрь 2013 (1)
- Август 2013 (1)
- Июль 2013 (3)
- Июнь 2013 (10)
- Май 2013 (1)
- Апрель 2013 (2)
- Февраль 2013 (3)
- Январь 2013 (3)
- +2012 (41)
- Декабрь 2012 (2)
- Ноябрь 2012 (3)
- Октябрь 2012 (7)
- Сентябрь 2012 (2)
- Август 2012 (1)
- Июль 2012 (3)
- Июнь 2012 (2)
- Май 2012 (6)
- Апрель 2012 (2)
- Март 2012 (7)
- Февраль 2012 (5)
- Январь 2012 (1)
- +2011 (57)
- Декабрь 2011 (6)
- Ноябрь 2011 (2)
- Октябрь 2011 (3)
- Сентябрь 2011 (5)
- Август 2011 (4)
- Июль 2011 (3)
- Июнь 2011 (3)
- Май 2011 (3)
- Апрель 2011 (4)
- Март 2011 (10)
- Февраль 2011 (5)
- Январь 2011 (9)
- +2010 (43)
- Декабрь 2010 (7)
- Ноябрь 2010 (21)
- Октябрь 2010 (14)
- Сентябрь 2010 (1)
Свежие записи
- Как добавить алиас сетевого интерфейса в Centos 7 (Linux) 23.09.2024
- Вывести в меню индикатор новых новостей и статей на сайте Тильда 28.08.2024
- Свой сетевой диск для iPhone — поднимаем Samba на Centos 27.08.2024
- Бекап, сохранение и восстановление БД MySQL 21.08.2024
- Авторизация SSH с помощью ключа в Putty 20.08.2024