Advanced Smart Crop — интеллектуальное автоматическое кадрирование изображений с помощью ImageKit | Рахул Нанвани | Блог

Опубликовано в

·

Чтение: 7 мин.

·

6 августа 2018 г.

Каждое изображение отличается. Каждое устройство отличается. Таким образом, каждое изображение необходимо обрабатывать по-разному, чтобы обеспечить идеальную отзывчивость на разных устройствах. Smart Crop — это функция, которая интеллектуально просматривает содержимое изображения и автоматически фокусируется на наиболее важной части изображения для кадрирования.

Когда мы изменяем размер изображений для разных устройств или заполнителей, а соотношение сторон запрошенного размера не совпадает с соотношением сторон исходного изображения, по бокам изображения обязательно происходит некоторая обрезка. Это когда мы не хотим сильно растягивать или искажать изображение. Это видно из рисунка ниже, где мы запрашиваем выходное соотношение сторон 1: 1 из входного изображения с соотношением сторон 4: 3 —

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

Теперь, поскольку обрезка в этих обстоятельствах неизбежна, если объект изображения не находится в центре, он будет обрезан из изображения. Например, если я попытаюсь изменить размер изображения ниже, чтобы получить квадратную миниатюру, стороны изображения (часть со зданиями) будут обрезаны.

Результаты с центральной обрезкой по умолчанию. Более важной частью изображения являются здания либо с левой, либо с правой стороны изображения, которые обрезаются с помощью обрезки по центру.

Smart Crop — это способ интеллектуального определения наиболее важной части изображения и удержания ее в фокусе при обрезке изображения. Используя эту функцию, вы сможете с высокой вероятностью создавать идеальные эскизы, центрированные по объекту изображения или наиболее важной функции

Например, для приведенного выше изображения Smart Crop создает следующий эскиз

Обрезка изображения с кадрированием по центру . Здания слева теперь находятся в фокусе на выходном изображении.

Как видите, функция Smart Crop в ImageKit могла разумно определить, что здания на изображении важны, и сохранить их на финальном эскизе.

Мы учитываем множество факторов при расчете наиболее важной области изображения. Наиболее очевидным является обнаружение лица (или нескольких лиц) на изображении. Если мы находим лицо на изображении, мы пытаемся сфокусировать обрезку на этом лице как можно ближе. Однако, если мы не можем найти лицо на изображении, мы пытаемся выполнить обнаружение признаков на изображении. Затем центр таких нелицевых элементов используется для расчета размеров обрезки исходного изображения.

ImageKit предлагает два режима кадрирования для интеллектуального кадрирования. Один из них — режим автоматической обрезки, а другой — режим обрезки лица.

В режиме автоматической обрезки мы пытаемся сохранить как можно большую часть изображения, сосредоточив внимание на самой важной части изображения. Это полезно, когда вы пытаетесь создать галерею изображений. Каждая миниатюра в этой галерее будет содержать самую важную часть изображения. Вам нужно использовать преобразование «fo-auto» для этого режима обрезки.

Исходное изображение (уменьшенное) Режим кадрирования лица, при котором выделяется только лицо и создается его миниатюра. Режим автоматического кадрирования, фокусирующийся на наиболее важной части изображения. В этом случае, несмотря на то, что девушка находится в левой половине исходного изображения, с умной обрезкой мы можем создать миниатюру с девушкой в ​​центре.

В режиме обрезки лица мы пытаемся извлечь самое большое лицо из изображения, а остальная часть изображения отбрасывается. Это полезно, когда вы пытаетесь создать изображения профиля из большего изображения. Вам нужно использовать преобразование «fo-face» для этого режима кадрирования.

Если у вас нет учетной записи ImageKit, вы можете зарегистрироваться для получения бесплатной пробной версии здесь.

Как и все другие преобразования изображений и оптимизации в ImageKit, эта функция также работает в режиме реального времени, просто добавляя параметр к URL-адресу. В этом случае нам нужно установить значение « focus » в строке трансформации на « auto » (для режима автокропа) или « face » (для режима кадрирования лица). Это означает, что вам нужно добавить fo-auto или fo-face в строку преобразования ваших URL-адресов эскизов.

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

Если ваш обычный URL-адрес эскиза —

 https://ik.imagekit.io/demo/img/tr:h-200,w-200/default-image.jpg 

Чтобы включить интеллектуальное кадрирование в режиме автоматического кадрирования, этот URL-адрес изменится на

 https://ik. imagekit.io/demo/img/tr:h-200,w-200,fo-auto/default-image.jpg 

Чтобы включить интеллектуальную обрезку в режиме обрезки лица , этот URL изменится на

 https://ik.imagekit.io/demo/img/tr:h-200,w-200,fo-face/default-image.jpg 

кадрированиеУмное кадрированиеИсходное изображениеЦентральное кадрированиеУмное кадрированиеИсходное изображениеЦентральное кадрированиеУмное кадрированиеИсходное изображениеЦентральное кадрированиеУмное кадрированиеИсходное изображениеИнтеллектуальное кадрирование (автоматический режим)Умное кадрирование (режим лица)Исходное изображениеИнтеллектуальное кадрирование (автоматический режим)Умное кадрирование (режим лица)Исходное изображениеИнтеллектуальное кадрирование (автоматический режим)Умное кадрирование (режим лица)Исходное изображение ImageИнтеллектуальное кадрирование (автоматический режим)Интеллектуальное кадрирование (режим лица)

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

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

 https://ik.imagekit.io/demo/img/tr:w-200,h-200,fo-face:r-max/https://images.pexels.com/photos/874158/pexels- photo-874158.jpeg 

Интеллектуальная обрезка (режим лица) со скругленными углами

Хотя мы протестировали производительность и результаты для самых разных изображений, интеллектуальная обрезка может давать неточные результаты для небольшого процента изображений. Интеллектуальное кадрирование — это сложная проблема, которую нужно решить, сохраняя при этом все близко к реальному времени. Мы открыты для ваших отзывов, которые помогут нам еще больше повысить точность алгоритма кадрирования. Пожалуйста, попробуйте и поделитесь своими отзывами в комментариях ниже. Или вы можете написать нам на [email protected].

Advanced Smart Crop — интеллектуальное автоматическое кадрирование изображения

Содержание

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

Каждое изображение отличается. Каждое устройство отличается. Таким образом, каждое изображение необходимо обрабатывать по-разному, чтобы обеспечить идеальную отзывчивость на разных устройствах. Smart Crop — это функция, которая интеллектуально просматривает содержимое изображения и автоматически фокусируется на наиболее важной части изображения для кадрирования.

Что такое Smart Crop?

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

Это можно увидеть на графике ниже, где мы запрашиваем выходное соотношение сторон 1:1 из входного изображения с соотношением сторон 4:3 —

Теперь, поскольку в этих обстоятельствах обрезка будет неизбежной, если объект изображение не в центре, тогда оно будет обрезано.

Например, если я попытаюсь изменить размер изображения ниже, чтобы получить квадратную миниатюру, стороны изображения (здания) будут обрезаны.

Исходное изображениеИзображение размером 200 x 200, здания обрезаются по бокам при обычной обрезке

Smart Crop — это способ интеллектуального определения наиболее важной части изображения и удержания ее в фокусе при обрезке изображения. Используя эту функцию, вы сможете создавать идеальные миниатюры, центрированные по теме изображения или наиболее важной функции с высокой вероятностью.

Например, для изображения выше функция Smart Crop создает следующую миниатюру:

Исходное изображение Изображение размером 200 x 200, здания сбоку находятся в фокусе благодаря интеллектуальной обрезке важные и сохранили их в финальном эскизе.

Как определить самую важную часть изображения?

Мы учитываем множество факторов при расчете наиболее важной области изображения. Наиболее очевидным из них является обнаружение лица (или нескольких лиц) на изображении. Если мы находим лицо на изображении, мы пытаемся сфокусировать обрезку на этом лице как можно ближе. Однако, если мы не можем найти лицо на изображении, мы пытаемся выполнить обнаружение признаков на изображении. Затем центр таких нелицевых элементов используется для расчета размеров обрезки исходного изображения.

Можем ли мы контролировать обрезку?

ImageKit предлагает два режима обрезки для интеллектуальной обрезки. Один из них — режим автоматической обрезки, а другой — режим обрезки лица.

В режиме автоматической обрезки мы пытаемся сохранить как можно большую часть изображения, сосредоточив внимание на самой важной части изображения. Это полезно, когда вы пытаетесь создать галерею изображений. Каждая миниатюра в этой галерее будет содержать самую важную часть изображения. Вам нужно использовать преобразование «fo-auto» для этого режима обрезки.

Исходное изображениеРежим обрезки лицаАвтоматический режим обрезки ‌‌

В режиме обрезки лица мы пытаемся извлечь самое большое лицо из изображения, а остальная часть изображения отбрасывается. Это полезно, когда вы пытаетесь создать изображения профиля из большего изображения. Вам нужно использовать преобразование «fo-face» для этого режима обрезки.

Как начать использовать Smart Crop для изображений?

Как и все другие преобразования изображений и оптимизации в ImageKit, эта функция также работает в режиме реального времени, просто добавляя параметр к URL-адресу. В этом случае нам нужно установить значение « focus » в строке преобразования на « auto » (для режима авто кадрирования) или « face » (для режима кадрирования лица). Это означает, что вам нужно добавить fo-auto или fo-face в строку преобразования URL-адресов эскизов.

Для работы Smart Crop необходимо указать как высоту, так и ширину выходного изображения. Если указать только высоту или ширину, ImageKit сохранит соотношение сторон без кадрирования Подробнее о различных режимах фокусировки вы можете прочитать в нашей подробной документации здесь.0003

Если ваш обычный URL-адрес миниатюры

 https://ik.imagekit.io/demo/img/tr:h-200,w-200/default-image.jpg 

Чтобы включить интеллектуальную обрезку в режиме автоматической обрезки, этот URL-адрес изменится на

 https://ik. imagekit.io/demo/img/tr:h-200,w-200,fo-auto/default-image.jpg 

Чтобы включить Smart Crop с режимом кадрирования лица , этот URL изменится на

 https://ik.imagekit.io/demo/img/tr:h-200,w-200,fo-face/default-image.jpg 

Примеры Smart Crop в действии ( автоматический режим)

Пример 1

Исходное изображениеОбычное кадрирование, миниатюра 200×200 пикселейУмная обрезка, миниатюра 200×200 пикселей Исходное изображениеNormal Crop, 200x200px thumbnailSmart Cropped 200x200px thumbnail

Пример 4

Пример изображения — PersonNormal Crop, 200x200px thumbnailSmart Cropped 200x200px thumbnail

Пример 5

Пример изображения — ObjectNormal Crop, 200x200px thumbnailSmart Cropped 200x200px thumbnail

Пример 6

Исходное изображениеОбычная обрезка, миниатюра 300×100 пикселейУмная обрезка миниатюра 300×100 пикселей 0px thumbnail

Пример 2

Исходное изображениеРежим автоматической обрезки, 200x200px thumbnailFace Crop Mode 200x200px thumbnail

Пример 3

Исходное изображениеАвторежим кадрирования, 200x200px thumbnailFace Crop Mode 200x200px thumbnail

Пример 4

Исходное изображениеAuto Crop Mode, 200x200px thumbnailFace Crop Mode 200×200 миниатюра 9 пикс. 0070 Лучшие приложения для этой функции

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

Могу ли я использовать функцию Smart Crop с другими преобразованиями

Конечно, можно. Вы можете комбинировать интеллектуальную обрезку с любым другим преобразованием, предлагаемым ImageKit.

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

https://ik.