В этой статье я расскажу, как сделать свой сайт, предоставляющий пользователям доступ к загрузке фотографий, удобнее в обращении. К сожалению, не у всех людей есть возможность воспользоваться фоторедактором, поэтому функция обрезки/изменения размера изображения значительно упростит взаимодействие с сайтом, также можно разрешать пользователям загружать фотографии с любого устройства (например, планшет или телефон), не беспокоясь о конечном размере. Кроме того, вы можете создавать разные версии одного и того же изображения, а также позволять пользователям обрезать выделенные части загруженного изображения.
Сегодня я покажу вам, как, можно используя PHP ImageMagick, изменять изображения (обрезать и масштабировать). В этом руководстве предполагается, что вы уже знакомы с этим расширением, поэтому, если нет, то обязательно прочтите.
Знакомство с ImageMagick
Расширение ImageMagick выполняет обработку изображений с помощью библиотеки ImageMagick. ImageMagick содержит большое количество методов API, которые дадут вам возможность изменять изображение почти любым образам. Он представляет простой объектно-ориентированный интерфейс для использования API. Для начала нам необходимо получить экземпляр класса Imagick, а затем вызвать соответствующие методы для начала работы с файлами.
Так как нам необходимо обрезать изображение, мы будем использовать два метода: cropImage() и thumbnailimage().
Метод cropImage() принимает на вход четыре параметра. Первые два определяют высоту и ширину выделенной или обрезанной области, а последние два определяют расположение X и Y в верхнем левом углу.
Например:
$inFile = "test.jpg";
$outFile = "test-cropped.jpg";
$image = new Imagick($inFile);
$image->cropImage(400, 400, 30, 10);
$image->writeImage($outFile);
Перед началом работы получим экземпляр Imagick, передав в его конструктор имя файла нашего изображения. После чего мы вызовем cropImage() с необходимыми параметрами. В этом случае метод создаст конечное изображение размером 400×400 пикселей, начиная с 30px сверху и 10px слева от начального изображения. В конце воспользовавшись writeImage() сохраним результат.
Метод thumbnailImage() на вход принимает два параметра высоту и ширину конечного изображения и может использоваться так:
$inFile = "test.jpg";
$outFile = "test-thumbnail.jpg";
$image = new Imagick($inFile);
$image->thumbnailImage(200, 200);
$image->writeImage($outFile);
Выше я привел код для создания версии изображения размером 200×200 пикселей. Если параметры width или height для thumbnailImage() определены как 0, пропорция сторон сохранится.
Мы можем также добавить третий параметр, который называется bestfit. Если он установлен в true, файл поменяется таким образом, чтобы получившаяся величина могла содержаться в указанной высоте и ширине. К примеру, исполнение метода thumbnailImage(400, 400, true) на изображении 1200×768 пикселей изменит версию до 400×200 пикселей. Новые размеры будут меньше или равны указанным размерам.
Теперь, когда мы изучили базовую информацию, перейдем к самому интересному.
Загрузка и обрезка изображения
Конечно, изначально нам потребуется создать HTML форму, которая поможет пользователям в загрузке фотографии:
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="file">Image:</label>
<input type="file" name="file" id="file"><br>
<input type="submit" name="submit" value="Upload and Crop">
</form>
После нажатия кнопки загрузки, скрипт, обработает процесс загрузки файла, покажет пользователю загруженное изображение для дальнейших манипуляций и получит POST-запрос. Не забудьте, что при загрузке файлов Вам необходимо установить дополнено enctype формы в «multipart/form-data».
Скрипт при необходимости загружает изображение и изменяет его размер:
if (isset($_FILES["file"])) {
$tmpFile = $_FILES["file"]["tmp_name"];
$fileName = ... // имя загружаемого файла
list($width, $height) = getimagesize($tmpFile);
if ($width == null && $height == null) {
header("Location: index.php");
return;
}
if ($width >= 400 && $height >= 400) {
$image = new Imagick($tmpFile);
$image->thumbnailImage(400, 400);
$image->writeImage($fileName);
}
else {
move_uploaded_file($tmpFile, $fileName);
}
}
Если вы не создадите безопасную систему загрузки, кто-нибудь может установить на ваш сайт наносящий вред файл, поэтому будьте начеку. Чтобы лучше изучить информацию по этой теме, рекомендую прочитать статью «Загрузка файлов с помощью PHP», обращая особое внимание на раздел «Вопросы безопасности».
Метод getimagesize() вернет null для width и height, если загружаемый файл не является изображением и произойдет ридирект на index.php. Этим же методом можно проверить размер и тип изображения.
Так как скрипту уже известна ширина и высота изначального изображения в этот раз, он может установить, нужно ли уменьшать данное изображение. Если размеры превосходят 400×400 пикселей, тогда фотография уменьшится до 400×400 пикселей, используя thumbnailImage(). Как я истолковал раньше, метод использует два значения: ширина и высота. Чтобы сохранить пропорцию сторон изображения, дайте значение одной из переменной 0.
В итоге, конечное изображение сохраняется посредством использования метода writeImage() и перемещается с помощью move_uploaded_file() в нужное место, если были пройдены все проверки. Далее конечное изображение извлекается в браузер для того, чтобы пользователь смог изменить его. Плагин jQuery, названный ImageAreaSelect, используется, чтобы пользователи могли выделить нужную часть изображения. Чтобы воспользоваться плагином, необходима библиотека jQuery, файлы CSS и JavaScript.
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css">
Далее стоит воспользоваться плагином, следующим образам:
selection = $('#photo').imgAreaSelect({
handles: true,
instance: true
});
#photo - это идентификатор изображения, представленного пользователю. Указав в параметре handles true, вы сможете отображать преобразования размера в области выбора, а instance true получает экземпляр и сохраняет его для выбора переменной. Благодаря selection вы можете легко заполучить намеченную область после того, как пользователь завершит свою обрезку.
При помощи функции getSelection() вы можете получить все необходимые параметры. Например, getSelection().width указывает ширину выделенной области. Похожим образом достаются другие параметры getSelection().x1 и getSelection().y1 для нахождения координаты верхнего левого угла области выбора.
Размещая все это на странице, вы, вероятно, зарегистрируете событие onclick на ссылку или кнопку, которую пользователь щелкнет для завершения действий. При нажатии кнопки сохраняется ширина, высота и верхние угловые координаты выбранной зоны.
$("#crop").click(function(){
var s = selection.getSelection();
var width = s.width;
var height = s.height;
var x = s.x1;
var y = s.y1;
...
});
Скрипт обрезки использует ajax, отправляя эти значения в качестве параметров запроса, так как они требуются для изменения изображения через ImageMagick на сервере. После этого, вам следует ввести имя изображения, так как скрипту необходимо будет узнать имя изображения для последующих манипуляций.
var request = $.ajax({
url: "crop.php",
type: "GET",
data: {
x: x,
y: y,
height: height,
width: width,
image: $("#photo").attr("src")
}
});
После окончания запроса изображение обновляется, так что новая отредактированная фотография будет представлена вместо старого изображения.
request.done(function(msg) {
$("#photo").attr("src", msg);
selection.cancelSelection();
});
После преобразования фотографии, имя обрезанного изображения вернётся, а путь до нового загрузится в атрибут src.
Но как же выглядит скрипт команды?
$file = basename($_GET["image"]);
$cropped = "cropped_" . $file;
$image = new Imagick($file);
$image->cropImage($_GET["width"], $_GET["height"], $_GET["x"], $_GET["y"]);
$image->writeImage($cropped);
echo $cropped;
Поначалу скрипт получает имя изображения, которое пользователь хочет отредактировать: имя будет подробным URL-адресом в виде http://example.com/path/image.jpg, но требуется только часть image.jpg. После чего, код «cropped» получает доступ к изначальному имени, чтобы изменить на cropped_image.jpg. Это позволит сохранить обрезанное изображение без перезаписи оригинала.
Метод cropImage() применяется чтобы обрезать стартовое изображение с использованием четырех величин, связанных с областью выбора, которые были отправлены скрипту, а потом полученное изображение сохраняется в новом файле. Дальше имя отредактированного изображения возвращается как ответ ajax запроса для отображения в браузере. Вот и всё!
Подводим итоги и делаем выводы
В этой статье я показал вам как создать простой инструмент обрезки и показал удобство и простоту использования расширения ImageMagick. Если вы хотите сделать сайт более удобным, можете узнать об этом больше и проявить свою креативность. Например, если вы хотите улучшить то, что я здесь представил, например, дать пользователям возможность загружать свои изображения в нескольких размерах. Для этого вам пригодиться этот скрипт на GitHub.