Кадрирование и изменение размера изображений с помощью ImageMagick

 <?php
if (isset($_FILES["file"])) {
    $tmpFile = $_FILES["file"]["tmp_name"];
    $fileName = ... // determine secure name for uploaded file

    list($width, $height) = getimagesize($tmpFile);
    // check if the file is really an image
    if ($width == null && $height == null) {
        header("Location: index.php");
        return;
    }
    // resize if necessary
    if ($width >= 400 && $height >= 400) {
        $image = new Imagick($tmpFile);
        $image->thumbnailImage(400, 400);
        $image->writeImage($fileName);
    }
    else {
        move_uploaded_file($tmpFile, $fileName);
    }
}

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

Функция getimagesize() Кроме того, вы также можете проверить тип изображения и размер файла с помощью getimagesize()

Поскольку сценарий уже знает ширину и высоту загруженного изображения в этой точке, он может определить, следует ли уменьшить размер изображения. Если размеры превышают 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 Установив handlesinstanceselectionselection Благодаря getSelection()

getSelection().width Например, getSelection().x1 Точно так же вы можете использовать getSelection().y1onclick

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

 $("#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

Так как же выглядит сценарий обрезки?

 <?php
$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_image.jpg . Это позволяет сохранить обрезанное изображение без перезаписи оригинала.

Метод cropImage() Имя обрезанного изображения затем возвращается в запрос Ajax для отображения в браузере.

Вывод

В этой статье я создал простой инструмент обрезки, чтобы показать вам мощь и простоту использования расширения ImageMagick. Вы можете узнать больше об этом, проявить творческий подход и сделать что-то более полезное, используя его мощный API. Например, если вы хотите расширить то, что я здесь представил, вы можете предоставить пользователям возможность загружать их изображения в разных размерах. Пример кода, сопровождающего эту статью , доступен на GitHub для начала работы.

Изображение через Fotolia

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам SitePoint и интерактивным онлайн-курсам, таким как Jump Start PHP .

Комментарии к этой статье закрыты. Есть вопрос по PHP? Почему бы не спросить об этом на наших форумах ?