imagemagick php crop image

PHP Resize image down and crop using imagemagick

I’m trying to downsize image uploaded by users at the time of upload.
This is no problem but I want to get specific with sizes now.

This image needs to be downsized to a target box size (this changes but is stored in a variable)..
So it needs to downsize the image so that both the width and height are larger than the width and height of the target maintaining aspect ratio. but only just..
The target size will be used to crop the image so there is no white space around the edges etc.

I’m not really asking for PHP code more pseudo. Either is fine obviously.

Current code.. but I’ve gone through so many iterations this might not work at all anymore.. 😛

2 Answers 2

Notice: I wrote this answer before the original poster edited his question to include things which clarified points which has since changed what I believed the original question was asking.

So, there are a few concepts and ideas that you can throw around to try and solve what it is you are intending to achieve. (Gravity Cropping, Content Aware Cropping, Content Aware Rescaling etc)

Because you are always decreasing the size of the original image, you are essentially just looking to «chop» out a section of the image. Very much like this:

The issue however, is that you frequently want to make sure that you select the best region of the image so that you don’t crop on an irrelevant segment of the image. This is known as content-aware image cropping, and by just searching using «Content Aware Image Crop» you can find a wealth of information.

Anyway, moving on, depending on your exact use case, you might discover that actually you don’t want to chop out anything form the image, and instead you want to «liquid scale and crop» the image, so that you do «Content Aware Resizing». The difference with content aware resizing is that the resizing ignores all aspect ratios of the image and instead looks at neighbouring edges and colors in order to resize the image in a fluidic way.

So, luckily enough, Imagick comes with it’s very own [liquidRescaleImage][3] function.

You can use it like

$im->liquidRescaleImage(480, 260, 3, 18);

Using Liquid Rescale can rescale out quite nicely. Here is an example below which is anything but perfect, but I purposefully have created an example that isn’t perfect so you can actually see that liquidRescale changes the composition of the image, rather than just adjusts the aspect ratio.

Original

Content Aware Liquid Rescale (450×350)

If however, you just want to scale an image, and keep the aspect ratio, you might want to do what sites such as Flickr do, where they make the images longestLength to be equal to a value. (Flickr for example has 6 or so different dimension sizes)

We resize your photos to more web-friendly dimensions. Each image has a 75×75 and 150×150 square thumbnail and 100-, 240-, 320-, 500-, 640- 800*-, 1024-, 1600*-, and 2048*-pixel versions (that’s the length of the longest side), as well as your original file.

Basic Class that Replicates the Flickr Resize Policies.

And then if you were to pass in the Image Dimensions like this:

Also, there is this Content Aware Cropping class on Git, that I have previously adapted the base class/Structure previously to use in my own project so I know that it works nicely. I’m not sure on the licencing of this class, but you can obviously take a look at it and slice out what works for you as I have done previously.

(And PS. Provide all the information in your questions straight up next time. )

Источник

Crop and Resize Images with ImageMagick

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

If your website allows users to upload photos, image cropping/resizing functionality certainly comes in handy. But users might not have access to image manipulation tools like Photoshop, so by providing a cropping/resizing feature you can allow users to upload photos from any device (e.g. tablets or phones) without them having to worry about the the final size. Furthermore, you can create different versions of the same image and also allow users to crop specific portions of uploaded picture.

In this article I’ll show you how to create an image cropping tool with the help of the ImageMagick PHP extension. This tutorial assumes that you already have the extension installed, so if not then be sure to read the manual.

Getting Familiar

The ImageMagick extension performs image processing using the ImageMagick library. ImageMagick provides a lot of API methods through which you can manipulate an image. It offers a simple object-oriented interface to use the API; you just need to create an instance of the Imagick class and then call the appropriate methods to start manipulating the images.

cropImage

The cropImage() method accepts four arguments. The first two arguments indicate the height and width of the cropped region, and the last two indicate the X and Y coordinates of the top-left corner of the cropped area.

We create an Imagick object first, passing to its constructor the filename of our image. Then we call cropImage() with appropriate arguments. In this case the code will produce a cropped image of size 400Г—400px starting at 30px from the top and 10px in from the left of the original image. Finally, writeImage() saves the result back to disk for us.

thumbnailImage

The thumbnailImage() method simply accepts the height and width of the resized image and can be used as follows:

The above code produces a 200Г—200px version of image. If either the width or height argument to thumbnailImage() is set as 0, the aspect ratio is maintained.

We can also pass a third argument known as bestfit; If this is set true, the image will be resized in such a way that the new dimensions can be contained within the height and width specified. For example, a call to thumbnailImage(400, 400, true) on a 1200Г—768px image will produce a 400Г—200px version. The new dimensions are less than or equal to the specified dimensions.

Now that you’re familiar with the two methods, we’re good to go.

Upload and Cropping

Of course we’ll need to create an HTML form with which users can upload photos:

As soon as the user hits the upload button a POST request will be sent to a script which will handle the file upload process and show the uploaded image to the user for cropping. Remember, when uploading files you need to set the form’s enctype attribute to “multipart/form-data”.

An upload script handles the image upload and resizing the image if required.

You should be very careful while accepting files from users as someone can upload a malicious file to your server if you don’t create a secure upload system. For more information, read the article File Uploads with PHP, paying special attention to the “Security Considerations” section.

The saved image is outputted to the browser so that the user gets a chance to crop it. To allow users to select specific portion of the image, I use a jQuery plugin called ImageAreaSelect. To use the plugin, the jQuery library needs to be available, as well as the plugin’s CSS and JavaScript files.

To initialize the plugin you can use the following code:

getSelection() gives you everything you need. For example, getSelection().width gives you the width of the selection area. Similarly, you can use getSelection().x1 and getSelection().y1 to find the coordinates of the top left-corner of the selection area.

Putting this all together in a page, you’ll most likely register an onclick callback to a link or button, which the user can click to finalize his selection. When the button is clicked, the selection area width, height, and top-left corner coordinates is retrieved.

An Ajax request is sent to a cropping script, passing these values as request parameters since they are needed to crop the image through ImageMagick. Additionally, you’ll want to send the image name since the script will need to know the name of the image that it will be cropping.

When the request finishes, the image is reloaded so that the new cropped version will be shown in place of the old image.

When cropping is done, the request returns the name of the cropped image, and the new image is loaded by changing the src attribute.

So what does the cropping script look like?

The script first extracts the name of the image that needs to be cropped; the image name will be a full URL in the form of http://example.com/path/image.jpg, but only the image.jpg part is needed. Next, the string “cropped” is prefixed to the original name so that it will look like cropped_image.jpg. This allows the cropped image to be saved without overwriting the original.

The cropImage() method is used to crop the original image using the four parameters related to the selection area that were sent to the script, and then the cropped image is saved to the new file. The name of the cropped image is then echoed back to the Ajax request for display in the browser.

Conclusion

In this article I created a simple cropping tool to show you the power and easy of use of the ImageMagick extension. You can learn more about it, and be creative and make something more useful using its powerful API. For instance, if you wanted to extend what I’ve presented here, you could give users the option to download their images in multiple sizes. Sample code to accompany this article is available on GitHub to get you started.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like Jump Start PHP.

Comments on this article are closed. Have a question about PHP? Why not ask it on our forums?

Источник

center crop with gravity using Imagick and PHP

I’m looking to center crop and image using Imagick PHP apis (not command line version of Imagick).

Essentially I want to do what is possible via command line, using API. Here is an example via command line: http://www.imagemagick.org/Usage/crop/#crop_gravity

Here is what I’m doing (not working). It always crops the upper left corner of the source:

Why is the setGravity not applying to the image before the crop? http://www.php.net/manual/en/function.imagick-setgravity.php says it should apply to the object (in this case the single image).

4 Answers 4

Its too late for the original person who asked the question but for future visitors, correct solution is

Sorry for late reply but I too stuck here just 30 mins ago and first google result redirected me here. Hope same will not happen with others.

Looks like there is not support, here is how I ended up doing it: https://gist.github.com/1364489

The Imagemagick object’s cropImage() method’s 3rd and 4th argument are defining the upper-left corner of the crop. Either try passing those as null (and use the setGravity() method), or you may actually have to calculate where the crop is supposed to take place and pop those numbers into the cropImage() method (and don’t bother with setGravity() ).

For what it’s worth, I have done a lot of coding around Imagemagick using PHP, and due to the horrible documentation of the Imagemagick extension, I resorted to making lots of nice’d command line calls.

Источник

PHP | Функция Imagick cropImage ()

Функция Imagick :: cropImage () — это встроенная функция в PHP, которая используется для извлечения области изображения.

Синтаксис:

Параметры: Эта функция принимает четыре параметра, как упомянуто выше и описано ниже.

Возвращаемое значение: эта функция возвращает True в случае успеха.

Ниже программы иллюстрируют функцию Imagick :: cropImage () в PHP:

Исходное изображение:

Программа 1:

// require_once (‘path / vendor / autoload.php’);

// Создаем объект imagick

$image = new Imagick(

// Функция Imagick для обрезки изображения

header( «Content-Type: image/jpg» );

Выход:

Исходное изображение:

Программа 2:

$string = «Computer Science portal for Geeks!» ;

// создаем новое изображение над строкой
// и добавить цвет и фон

$draw = new ImagickDraw();

// Заполняем цвет на изображении

// Устанавливаем размер шрифта текста

new ImagickPixel( ‘white’ ));

// Установить формат изображения

// Функция Imagick для обрезки изображения

header( «Content-Type: image/jpg» );

Выход:

Источник

Эффективное изменение размера картинок при помощи ImageMagick

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

Веб таким образом работает отлично, но для доставки картинок разных размеров разным пользователям необходимо все эти картинки сначала создать.

Множество инструментов занимается изменением размера, но слишком часто они выдают большие файлы, аннулирующие выигрыш в быстродействии, который должен приходить вместе с отзывчивыми картинками. Давайте рассмотрим, как при помощи ImageMagick, инструмента командной строки, быстренько изменять размеры картинок, сохраняя превосходное качество и получая файлы небольших объёмов.

Большие картинки == большие проблемы

Средняя веб-страница весит 2 Мб, из них 2/3 – картинки. Миллионы людей ходят в интернет через 3G, или ещё хуже. 2Мб-сайты в этих случаях работают ужасно. Даже на быстром соединении такие сайты могут израсходовать лимиты трафика. Работа веб-дизайнеров и разработчиков – упростить и улучшить жизнь пользователя.

Очень маленькие сайты могут просто сохранить несколько вариантов всех картинок. Но что, если у вас их дофига? Например, в магазине может быть сотня тысяч картинок – не делать же их варианты вручную.

ImageMagick

Как работает изменение размера картинок

По определению, при изменении размера картинки меняется количество пикселей в ней. Если её увеличивают, на выходе будет больше пикселей, чем на входе; при уменьшении – наоборот. Задача состоит в том, как лучше всего сохранить содержимое исходной картинки при помощи другого количества пикселей.

Увеличение картинок изобразить проще, так что начнём с него. Рассмотрим картинку с квадратиком 4х4 пикселя, который мы хотим удвоить до 8х8. По сути, мы берём эту картинку и натягиваем на новую сетку – это называется resampling (дискретизация). Чтобы сделать дискретизацию картинки 4х4 на 8х8, нужно куда-то вставить 48 лишних пикселей. У них должен быть какой-то цвет – процесс его подбора зовётся интерполяцией. При дискретизации алгоритм, выбирающий, как работает интерполяция, называется фильтром дискретизации.

Фильтров таких есть множество. Проще всего добавить четыре ряда и четыре столбца любого цвета. Ну, скажем, красного. Это будет фоновая интерполяция, когда на пустых местах появляется цвет фона (красный). В фотошопе это делается через “Image” → “Canvas Size” вместо “Image” → “Image Size”.

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

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

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

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

Но если это что-то посложнее линии и квадратов, такой метод выдаёт зазубренные и квадратные картинки. Он работает быстро, выдаёт мелкие файлы, но выглядит плохо.

Большинство фильтров используют вариации интерполяции по ближайшим соседям – они делают точечную дискретизацию по нескольким точкам и как-то вычисляют некий средний цвет для них. В билинейной интерполяции считается взвешенное среднее цветов.

Но такой фильтр влияет на размер файла, потому что он вместе с округлыми краями добавляет новые цвета. У оригинальной картинки было всего два цвета, теперь же у нас их больше. А при прочих равных, чем больше цветов, тем тяжелее файл.

И что же это означает для нас

Нам нужно как-то уменьшать количество цветов, не теряя в качестве. Больше всего на это влияет выбор фильтра, но и другие настройки тоже могут.

Оптимальные настройки для ImageMagick

Основы ImageMagick

У ImageMagick дофига настроек и функций, и найти нужную довольно тяжело. Нас интересуют две функции, convert и mogrify. Они выполняют схожие действия, но mogrify работает с несколькими файлами сразу, а convert – по одному.

Использовать mogrify можно также, с небольшим дополнением:

Тут IM берёт все файлы JPEG из текущей директории (*.jpg), изменяет их размер до 300 пикселей в ширину и сохраняет их в директории output.

Функции можно комбинировать:

Это тоже изменяет размер input.jpg до 300 пискелей, но устанавливает качество JPEG в 75 перед сохранением в output.jpg.

Тестирование и результаты

Тестируя различные настройки IM, я стремился уменьшить размер файлов, не ухудшая их качества – так, чтобы их не отличить было от опции фотошопа «Save for Web». Я использовал для проверки как субъективное мнение, так и объективное – измерял структурные различия (structural dissimilarity, DSSIM). DSSIM сравнивает две картинки и выдаёт оценку. Чем меньше оценка, тем больше они похожи. 0 означает идентичность. Я добивался оценки DSSIM не более 0,0075. А в одном из исследований в прошлом году было установлено, что обычно люди не могут на глаз отличить картинки с DSSIM менее 0,015.

Протестировав различные изображения разных размеров в форматах JPEG и PNG я пришёл к выводу, что следующие настройки IM создают наименьшие результаты, которые при этом практически неотличимы от выдачи фотошопа:

Разберём их подробнее.

Mogrify или Convert

IM использует convert для обработки картинок по одной, а mogrify обычно нужен для пакетной обработки. В идеальном мире результаты их работы должны совпадать. К сожалению, в convert есть ошибка, из-за которой он игнорирует некоторые из настроек (-define jpeg:fancy-upsampling=off), поэтому пришлось использовать mogrify.

Дискретизация (resampling)

Выбор фильтра дискретизации в IM почему-то запутан. Есть три способа это сделать:

Примеры работы двенадцати различных функций изменения размера

Очевиднее всего использовать –resize, но результаты получаются слишком большими. Я проверил 11 разных функций и обнаружил, что лучше всего с уменьшением справляется –thumbnail, как по размеру, так и по качеству. Эта функция работает в три этапа:

Второй способ выбрать фильтр дискретизации – через –filter. У некоторых функций есть встроенные фильтры, а у других есть фильтры по умолчанию, которые можно поменять. На втором шаге работы –thumbnail используется –filter, потому что там используется функция –resize.

Увеличение чёткости (Sharpening)

Фильтр работает так, что сначала применяется гауссово размытие. Первые два числа – это радиус и сигма (в нашем случае, по 0,25 пикселя). После размытия фильтр сравнивает размытую версию с оригиналом, и там, где яркость отличается более, чем заданный порог (0.065), применяется увеличение чёткости заданной силы (8).

Уменьшение цветности

Как я говорил ранее, основная причина увеличения объёма файлов при изменении размера картинок – добавление новых цветов. Поэтому нужно попытаться уменьшить их количество, но без потери качества.

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

Постеризация может уменьшить объём файла, но и ухудшить качество. Я предлагаю цифру 136, при которой вы получаете небольшой файл, не теряя особо в качестве.

Оригинал

Уменьшение количества цветов

Дизеринг (Dithering) – процесс, который смягчает последствия уменьшения количества цветов, добавляя шума в цветовые наборы, чтобы создать иллюзию большего количества цветов. В теории это хорошая идея.

После дизеринга

Ошибка дизеринга в IM

Цветовое пространство

Цветовой пространство косвенно относится к количеству цветов на картинке. Это пространтсво определяет, какие цвета доступны. На картинке ниже показано, что пространство цветов ProPhoto RGB содержит больше цветов, чем Adobe RGB, которое, в свою очередь, содержит больше, чем sRGB. И все они содержат цветов меньше, чем видит глаз.

sRGB сделали королём цветовых пространств интернета. Его одобрили W3C и другие организации. Он обязателен к поддержке в CSS Color Module Level 3 и в спецификациях SVG и WebP. На него ссылаются в спецификации PNG. В фотошопе это также это цветовое пространство по умолчанию. Короче, sRGB – лучший выбор для веба, и если вы хотите, чтобы ваши картинки правильно отображались, лучше использовать его.

Качество и сжатие

В форматах с потерей качества вроде JPEG качество и сжатие связаны напрямую – чем больше сжатие, тем ниже качество и меньше объём файла. Поэтому нужно найти баланс.

В моих тестах у контрольных картинок и фотошопа было выставлено качество high, или 60. А в настройках IM я рекомендую использовать 82. Почему?

А у форматов без потери качества вроде PNG, качество и сжатие не связаны. Высокое сжатие не меняет вид картинки, а зависит только от уровня загрузки процессора при её обработке. Если не жалеть компьютеры, то нет причин не выставлять максимальное сжатие PNG.

Мета данные

Прогрессивный рендер

JPEGs и PNGs можно сохранять при помощи прогрессивного (progressive) или последовательно (sequential) рендера. По умолчанию выполняется второй, когда пиксели грузятся по рядам, сверху вниз. Прогрессивный означает, что картинка передаётся и выводится постепенно.

У JPEG прогрессивный рендер может произойти в любое количество шагов – это определяется при сохранении файла. Первый шаг – версия низкого разрешения полной картинки; на каждом последующем появляется версия более высокого разрешения, пока не будет выдана вся картинка в высшем разрешении.

У PNG есть вид прогрессивного рендера под названием Adam7 interlacing, когда пиксели выводятся в семь шагов на основе сетки 8х8.

Оба вида рендера можно настроить в IM через –interlace. Но нужно ли?

Такой рендер увеличивает объём файлов. Долгое время считалось, что его нужно включать, поскольку он улучшает пользовательское восприятие. Даже если идеальная картинка не загрузится сразу, он что-нибудь распознает, и это будет лучше, чем ничего.

В прошлом году по результатам исследования стало видно, что пользователи предпочитают последовательный рендер. Это только одно исследование, но всё равно интересное. Так что я решил рекомендовать использовать последовательный рендер через «-interlace none».

Оптимизация картинок

Оптимизаторов есть множество. Я тестировал image_optim, picopt и ImageOptim, и они все прогоняют картинки через серию разных шагов. Я проверял их по очереди и пришёл к выводу, что лучше прогнать файлы через все три в том порядке, в каком они приведены. Правда, после использования image_optim выгода от picopt и ImageOptim становится минимальной. Если у вас нет лишнего времени и процессорной мощности, то использование более одной оптимизации будет чрезмерным.

Результаты (и что, стоило так мучаться?)

Конечно, настройки мои сложны, но для улучшения пользовательского восприятия они нужны. С радостью сообщаю, что потратив время на тесты, я сумел кардинально уменьшить объёмы файлов, не проиграв в качестве.

В среднем объём файлов уменьшился на 35% по сравнению с опцией фотошопа “Save for Web”.

Сравнение с Photoshop Creative Cloud

Мои настройки без оптимизации оказались даже лучше, чем у фотошопа с оптимизацией!

По сравнению с настройками по умолчанию при изменении размера картинок у IM, мои рекомендации выиграли в среднем 82%.

По сравнению с настройками по умолчанию в WordPress, который «под капотом» использует ImageMagick, мои настройки в среднем выиграли 77%.

По сравнению с другими CMS и инструментами, которые используют ImageMagick, мои настройки выигрывали аж до 144%.

Напоминаю, что все картинки получились неотличимыми от вывода фотошопа.

Как реализовать это в своих проектах

bash shell

А вызывать её нужно так:

Node.js

У npm package под названием imagemagick позволяет использовать ImageMagick. При его использовании можно добавить функцию изменения размера следующим образом:

Grunt

Если вы используете Grunt для запуска задач, то специально для вас я сделал задачу по имени grunt-respimg (npm), которая делает всё, что я описал. В свои проекты её можно включать вот так:

А затем её можно выполнить в файле Grunt:

grunt.initConfig( <
respimg: <
default: <
options: <
widths: [200, 400]
>,
files: [ <
expand: true,
cwd: ‘src/img/’,
src: [‘**.‘],
dest: ‘build/img/’
>]
>
>,
>);
grunt.loadNpmTasks(‘grunt-respimg’);

В PHP ImageMagick интегрирован под именем Imagick. К сожалению, там он ограничен и не умеет выполнять всё то, что я рекомендовал – в частности, настраивать фильтр дискретизации на использование функции thumbnail.

Но вам повезло – я создал модуль php-respimg (packagist), который делает всё нужное. Его можно включить в проект при помощи Composer:

А затем изменять размер картинок вот так:

Content Management Systems

Если ваша CMS работает на PHP, берите секцию «PHP» и делайте из неё плагин. Если вы используете WordPress, то вы можете использовать плагин RICG Responsive Images. После его установки для активации надо будет добавить следующее в файл functions.php:

Другие CMS так или иначе дают доступ к функциям по работе с картинками – обратитесь к их документации.

Быстродействие

В своих тестах я обнаружил, что по сравнению с –resize по умолчанию IM занимал в 2.25 раз больше времени на обработку картинок.

Заключение

Дизайнеры и разработчики очень сильно влияют на то, как работает веб. Мы можем сделать сайты более шустрыми, улучшить их восприятие пользователями, и даже вывести наш контент на новые рынки. Урезание объёма картинок делается довольно просто и сильно влияет на увеличение быстродействия сайта – надеюсь, что вся эта информация окажется полезной для вас и позволит вам улучшить ваш сайт для ваших пользователей.

Источник