Вырезаем изображение с помощью jQuery и PHP
Итак, допустим ваш клиент загрузил изображение в CMS и сказал, что ему оно не нравится, и он хотел бы его изменить. Этот сценарий знают практически все. В этом уроке мы реализуем вырезку изображения, и всё что вашему клиенту останется сделать, так это выделить нужный фрагмент и нажать на кнопку.
После того, как мы вырежем изображение через PHP GD, сохраним то, что у нас получилось на диске.
Я буду больше уделять внимание части редактирования изображения, полагая, что клиент предварительно его загрузил:
<p>Выделите необходимый фрагмент.</p> <p> <img id="photo" src="/photo.jpg" alt="" title="" style="margin: 0 0 0 10px;" /> </p>
Итак, у нас есть изображение с id и стилем. В нашем деле нам поможет плагин jQuery, ну для того чтобы не изобретать велосипед. Отправьтесь на страницу ImgAreaSelect jQuery и скачайте его.
Подключаем библиотеки и таблицы стилей в разделе head:
<link rel="stylesheet" type="text/css" href="/css/imgareaselect-default.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="/scripts/jquery.imgareaselect.pack.js"></script>
Теперь вы готовы к «приготовлению блюда»! Как я сказал ранее, мы покажем пользователю небольшое превью, которое реализуем через jQuery:
$(document).ready(function () { $('<div><img src="/photo.jpg" style="position: relative;" /><div>') .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }) .insertAfter($('#photo')); });
Данный код выведет блок размером 100x на 100px. Теперь реализуем функциональность, отвечающую за вырезание:
$(document).ready(function () { $('<div><img src="/photo.jpg" style="position: relative;" /><div>') .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }) .insertAfter($('#photo')); $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, onSelectChange: preview }); });
Мы добавили вызов нашего плагина, передали несколько параметров и функцию обратного вызова, которая отобразит выделенный нами фрагмент в отдельном блоке. Вот как она выглядит:
function preview(img, selection) { var scaleX = 100 / (selection.width || 1); var scaleY = 100 / (selection.height || 1); $('#photo + div > img').css({ width: Math.round(scaleX * 600) + 'px', height: Math.round(scaleY * 400) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); }
Тут пожалуй я немного объясню. Наш плагин отправит 2 параметра анонимной функции, изображение и координаты выделения. Выделение представлено у нас объектом, содержащим ширину, высоту и границы.
Затем мы получаем новые координаты и, изменяя значения свойств CSS нашего презентационного блока, показываем отдельный фрагмент фотки. Ну ни круто ли?
Ну и что теперь? Что дальше? Круть конечно полнейшая, но как нам сохранить выделенное изображение. Для этого нам необходимо послать соответствующие координаты в файл PHP. Чтобы нам было проще, создадим форму, в которую запишем соответствующие данные для отправки.
Давайте же создадим формы ниже нашего изображения:
<p> <img id="photo" src="/photo.jpg" alt="" title="" style="margin: 0 0 0 10px;" /> </p> <form action="crop.php" method="post"> <input type="hidden" name="x1" value="" /> <input type="hidden" name="y1" value="" /> <input type="hidden" name="x2" value="" /> <input type="hidden" name="y2" value="" /> <input type="hidden" name="w" value="" /> <input type="hidden" name="h" value="" /> <input type="submit" value="Crop" /> </form>
Теперь напишем JavaScript фрагмент, который будет заполнять поля нашей формы. Код примерно такой:
function preview(img, selection) { var scaleX = 100 / (selection.width || 1); var scaleY = 100 / (selection.height || 1); $('#photo + div > img').css({ width: Math.round(scaleX * 600) + 'px', height: Math.round(scaleY * 400) + 'px', marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' }); } $(document).ready(function () { $('<div><img src="/photo.jpg" style="position: relative;" /><div>') .css({ float: 'left', position: 'relative', overflow: 'hidden', width: '100px', height: '100px' }) .insertAfter($('#photo')); $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true, onSelectChange: preview, onSelectEnd: function ( image, selection ) { $('input[name=x1]').val(selection.x1); $('input[name=y1]').val(selection.y1); $('input[name=x2]').val(selection.x2); $('input[name=y2]').val(selection.y2); $('input[name=w]').val(selection.width); $('input[name=h]').val(selection.height); } }); });
Когда вы выделили необходимую область (отпустили кнопку мыши), функция обратного вызова вставит 4 координаты в поля нашей формы. После нажатия на кнопку Crop, эти данные отправляются в PHP файл crop.php, который вырежет выбранный фрагмент и сохранит его на диске. Содержимое файла crop.php:
// оригинальное изображение $filename = 'photo.jpg'; //die(print_r($_POST)); $new_filename = 'photo1.jpg'; // получаем размеры изображения list($current_width, $current_height) = getimagesize($filename); // координаты x и y оригинального изображение, где мы // буем вырезать фрагмент, по данным, берущимся из формы $x1 = $_POST['x1']; $y1 = $_POST['y1']; $x2 = $_POST['x2']; $y2 = $_POST['y2']; $w = $_POST['w']; $h = $_POST['h']; //die(print_r($_POST)); // финальные размеры изображения $crop_width = 100; $crop_height = 100; // создаём маленькое изображение $new = imagecreatetruecolor($crop_width, $crop_height); // создаём оригинальное изображение $current_image = imagecreatefromjpeg($filename); //вырезаем imagecopyresampled($new, $current_image, 0, 0, $x1, $y1, $crop_width, $crop_height, $w, $h); // создаём новое изображение imagejpeg($new, $new_filename, 95);
Вот и всё. Внимание: в целях безопасности, в demo функциональность скрипта ограничена.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/jSfJSBAbOK0/lessons.php


Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2025-03-14 » SPF-запись
- 2025-03-07 » SEO на маркетплейсах: как оптимизировать карточку товара для поисковой выдачи
- 2025-02-18 » Топ-10 бесплатных нейросетей для генерации изображений: лучшие ии генераторы 2024 года
- 2025-02-11 » Критическая уязвимость в 1С-Битрикс
- 2025-02-11 » Google Search Console: руководство для начинающих вебмастеров
- 2025-02-11 » Методы измерения результативности рекламных кампаний: плюсы и минусы
- 2025-02-11 » Тренды SEO в 2025 году
- 2025-02-10 » Свой Google в локалке. Ищем иголку в стоге сена
- 2025-01-29 » SEO — это комплексная работа. Шесть главных факторов ранжирования сайтов
- 2025-01-29 » Гайд для главной страницы e-commerce сайта: как оформить, чтобы повысить конверсию
- 2025-01-20 » Krea AI выпустила бесплатную функцию преобразования изображений в 3D-объекты — их можно вращать и вписывать в фотографии
- 2025-01-19 » Отзывы на Яндекс Картах: как пройти модерацию
- 2025-01-15 » Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN
- 2025-01-14 » 15 бесплатных способов узнать, чем интересуется ваша аудитория
- 2025-01-11 » Бездепозитные бонусы в казино за регистрацию с выводом: особенности и возможности получения
- 2025-01-09 » Новая модель LAM способна выполнять задачи в Word
- 2024-12-26 » Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025
- 2024-11-26 » Капитан грузового судна, или Как начать использовать Docker в своих проектах
- 2024-11-26 » Обеспечение безопасности ваших веб-приложений с помощью PHP OOP и PDO
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-22 » Ошибки в Яндекс Вебмастере: как найти и исправить
- 2024-11-15 » Перенос сайта на WordPress с одного домена на другой
- 2024-11-08 » OSPanel 6: быстрый старт
- 2024-11-08 » Как установить PhpMyAdmin в Open Server Panel
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
Несчастен тот человек, у которого есть любимый ресторан и нет любимого автора. Он нашел любимое место, где можно накормить тело, но не нашел любимого места, где можно накормить свой ум Рон Джим - выдающийся американский бизнес-тренер и мотиватор, разрабатывал стратегию работы компаний I.B.M., Coca-Cola, Xerox, General Motors и др. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.
Или напишите нам в WhatsApp
Или напишите нам в WhatsApp