Статьи

Создать Instagram фильтры с PHP

Март 9, 2019

В этом уроке я покажу, как создавать винтажные (как в Instagram ) фотографии с помощью PHP и ImageMagick . Подождите? Какая? Да, вы можете сделать то же самое с PHP и ImageMagick, и это только царапина на поверхности!

Мы сделали цифровые винтажные фотографии, пока они не были крутыми

Когда-то — технически 22 года назад (за 5 лет до PHP) — был выпущен ImageMagick. С тех пор он превратился в программно-независимый программный пакет, который может создавать, редактировать, создавать или преобразовывать растровые изображения (поддерживается более 100 форматов!). Вы можете использовать его для изменения размера, зеркального отражения, поворота, поворота, искажения, сдвига и преобразования изображений, настройки цветов изображения, применения различных специальных эффектов или рисования текста, линий, многоугольников, эллипсов и кривых Безье. В нем действительно есть все, что вам когда-либо понадобится, при работе с изображениями в веб-разработке, обработке видео, генерации панорамы и т. Д. Обратите внимание: это не графический редактор изображений.

ImageMagick — это командная строка Photoshop для Интернета.

Управление изображениями с помощью PHP

PHP поставляется в комплекте с GD (GIF Draw / Graphics Draw), которая является библиотекой для динамического создания изображений. Его можно использовать для более простых операций с изображениями, таких как изменение размера, обрезка, добавление водяных знаков, создание миниатюр (об этом писал Джеффри), применение базовых фотофильтров — вы, вероятно, использовали его раньше. К сожалению, если вы хотите создать что-то более сложное с GD, например, эффекты Instagram, вы не сможете. К счастью, у нас есть ImageMagick!

GD против ImageMagick

Эти два не могут сравниваться на более высоких уровнях, поэтому мы будем использовать простой пример, например, изменение размера. Давайте представим, что мы загрузили новое изображение 1024×768 photo.jpg и хотим динамически изменить его размер до 640×480 пикселей.

GD

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

01
02
03
04
05
06
07
08
09
10
11
12
13
$im = imagecreatefromjpeg(‘photo.jpg’);
 
$ox = imagesx($im);
$oy = imagesy($im);
 
$nx = 640;
$ny = 480;
 
$nm = imagecreatetruecolor($nx, $ny);
 
imagecopyresized($nm,$im,0,0,0,0,$nx,$ny,$ox,$oy);
 
imagejpeg($nm, ‘photo.jpg’);

ImageMagick

IM (сокращение от ImageMagick) имеет красивую оболочку под названием Imagick — собственное расширение PHP для создания и изменения изображений с помощью API ImageMagick. Единственный недостаток: вам, вероятно, придется установить его из PECL , что иногда может быть проблемой для виртуального хостинга.

1
2
$image = new Imagick(‘photo.jpg’);
$image->resizeImage(640, 480, imagick::FILTER_LANCZOS, 0.9);

Еще более простое использование командной строки с PHP (это то, что мы собираемся использовать):

1
exec(‘mogrify -resize 640×480 photo.jpg’);

Это оно! Отлично.

Установка ImageMagick

Хотя почти во всех хороших хостинговых компаниях установлен ImageMagick, вероятно, у вас его нет на локальной машине, просто потому, что он не поставляется с PHP.
Однако, установка ImageMagick — несложная задача. Перейдите на страницу загрузки ImageMagick , выберите свою платформу (Unix / Mac / Win) и выберите рекомендуемый пакет. Просто следуйте простым инструкциям; Вы не можете ошибиться здесь.

Когда закончите, перейдите в свой терминал / командную строку, введите команду convert и нажмите Enter Если вы получили список опций вместо «Команда не найдена», вы готовы! Обратите внимание, что вам не нужно ничего настраивать в PHP.

Как работает Instagram?

Ну, если честно, я не знаю, какую систему использует команда Instagram для обработки изображений. ImageMagick также доступен для iOS; возможно в этом и заключается магия того, как работает Instagram? По словам Кевина Систрома, генерального директора и соучредителя Instagram:

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

Например, Lomo-Fi действительно не намного больше, чем изображение с повышенной контрастностью. Принимая во внимание, что Toaster — один из самых сложных (и медленных, но популярных) фильтров, которые у нас есть с несколькими проходами и рисованием.

Я бы отказался от дополнительной информации, но это наш секретный соус 🙂 Может быть, когда-нибудь …

«Может быть, когда-нибудь …» недостаточно для нас, мистер Систром. Вызов принят!

Покажи мне кодекс!

Мы собираемся имитировать фильтры типа «готэм» (возвращение готэма), « тостер» (сложный), « нашвилл» (популярный), « ломо» (не очень хороший) и « кельвин» («лорд кельвин — оригинал»).

Инстаграф — класс PHP

Я создал небольшой класс-оболочку PHP, чтобы максимально упростить процесс фильтрации изображений. В этих фильтрах, как вы знаете, у нас много …

  • colortone : будет colortone изображение в светлых и / или теневых colortone . Например, мы хотим изменить черный цвет на фиолетовый.
  • vignette : края фото постепенно исчезают или обесцвечиваются. Мы можем даже изменить это или использовать цвета для виньетирования.
  • border : добавит границу к фотографии. Например, мы хотим белый или черный или любой цвет границы определенной ширины; обратите внимание, что ширина границы добавится к размерам фотографии.
  • frame : будет читать указанную рамку и растягиваться, чтобы соответствовать фотографии. Нам это нужно для фильтров Нэшвилла и Кельвина.
  • tempfile : создает временный файл (копию исходного изображения) для работы.
  • output : просто переименовывает рабочую копию.
  • execute : мы отправим все команды с помощью этого метода, чтобы предотвратить ошибки, которые могут возникнуть при работе с оболочкой.

Я упомянул все это, поэтому мы можем перейти к забавной части. Создайте новый файл с именем instagraph.php и скопируйте и вставьте приведенный ниже код.

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
/**
 * Instagram filters with PHP and ImageMagick
 *
 * @package Instagraph
 * @author Webarto <[email protected]>
 * @copyright NetTuts+
 * @license http://creativecommons.org/licenses/by-nc/3.0/ CC BY-NC
 */
class Instagraph
{
     
    public $_image = NULL;
    public $_output = NULL;
    public $_prefix = ‘IMG’;
    private $_width = NULL;
    private $_height = NULL;
    private $_tmp = NULL;
         
    public static function factory($image, $output)
    {
        return new Instagraph($image, $output);
    }
         
    public function __construct($image, $output)
    {
        if(file_exists($image))
        {
            $this->_image = $image;
            list($this->_width, $this->_height) = getimagesize($image);
            $this->_output = $output;
        }
        else
        {
            throw new Exception(‘File not found. Aborting.’);
        }
    }
 
    public function tempfile()
    {
        # copy original file and assign temporary name
        $this->_tmp = $this->_prefix.rand();
        copy($this->_image, $this->_tmp);
    }
     
    public function output()
    {
        # rename working temporary file to output filename
        rename($this->_tmp, $this->_output);
    }
 
    public function execute($command)
    {
        # remove newlines and convert single quotes to double to prevent errors
        $command = str_replace(array(«\n», «‘»), array(», ‘»‘), $command);
        $command = escapeshellcmd($command);
        # execute convert program
        exec($command);
    }
     
    /** ACTIONS */
     
    public function colortone($input, $color, $level, $type = 0)
    {
        $args[0] = $level;
        $args[1] = 100 — $level;
        $negate = $type == 0?
 
        $this->execute(«convert
        {$input}
        ( -clone 0 -fill ‘$color’ -colorize 100% )
        ( -clone 0 -colorspace gray $negate )
        -compose blend -define compose:args=$args[0],$args[1] -composite
        {$input}»);
    }
 
    public function border($input, $color = ‘black’, $width = 20)
    {
        $this->execute(«convert $input -bordercolor $color -border {$width}x{$width} $input»);
    }
 
    public function frame($input, $frame)
    {
        $this->execute(«convert $input ( ‘$frame’ -resize {$this->_width}x{$this->_height}! -unsharp 1.5×1.0+1.5+0.02 ) -flatten $input»);
    }
     
    public function vignette($input, $color_1 = ‘none’, $color_2 = ‘black’, $crop_factor = 1.5)
    {
        $crop_x = floor($this->_width * $crop_factor);
        $crop_y = floor($this->_height * $crop_factor);
         
        $this->execute(«convert
        ( {$input} )
        ( -size {$crop_x}x{$crop_y}
        radial-gradient:$color_1-$color_2
        -gravity center -crop {$this->_width}x{$this->_height}+0+0 +repage )
        -compose multiply -flatten
        {$input}»);
    }
     
    /** RESERVED FOR FILTER METHODS */
     
}

Instagram Фильтры

Мы пройдемся по фильтрам, один за другим; Я объясню необходимые методы PHP и команды Imagemagick, включая примеры. Убедитесь, что вы обновили свой PHP-класс с помощью этих новых методов (вставьте ниже комментарий RESERVED FOR FILTER METHODS). Рамки для фотографий предоставляются в пакете загрузки; это просто PNG прозрачные изображения без расширений. Не стесняйтесь сделать свой собственный! Итак, начнем …

оригинал

Здесь у нас просто есть фото моих собак, наслаждающихся днем ​​на пляже. Это прямо из моей камеры.

Терри и Линда на пляже

Gotham

Фильтр Готэма создает черно-белое высококонтрастное изображение с голубоватыми оттенками. В реальной жизни это будет сделано с помощью камеры Holga и пленки Ilford X2.

1
2
3
4
5
6
7
public function gotham()
{
    $this->tempfile();
    $this->execute(«convert $this->_tmp -modulate 120,10,100 -fill ‘#222b6d’ -colorize 20 -gamma 0.5 -contrast -contrast $this->_tmp»);
    $this->border($this->_tmp);
    $this->output();
}

На английском языке: создайте рабочий файл, загрузите изображение в память, немного улучшите яркость, (почти) обесцветьте, измените оставшиеся цвета на темно-фиолетовый, гамма-коррекцию (значение ниже 1 затемняет изображение), добавьте больше контраста, добавьте больше контраста, и сохранить все в файл. Добавьте 20px черную рамку. Просто, а?

Готамский фильтр

Тостер

Фильтр Toaster напоминает старые снимки Polaroid; Он имеет яркие цвета с розовым / оранжевым свечением от центра. По словам генерального директора Instagram, это один из самых сложных эффектов для создания; мы поверим на слово.

01
02
03
04
05
06
07
08
09
10
11
12
public function toaster()
{
    $this->tempfile();
    $this->colortone($this->_tmp, ‘#330000’, 100, 0);
 
    $this->execute(«convert $this->_tmp -modulate 150,80,100 -gamma 1.2 -contrast -contrast $this->_tmp»);
     
    $this->vignette($this->_tmp, ‘none’, ‘LavenderBlush3’);
    $this->vignette($this->_tmp, ‘#ff9966’, ‘none’);
         
    $this->output();
}

На английском языке: создайте рабочий файл, загрузите изображение в память, измените чёрный на тёмно-красный, увеличьте яркость, уменьшите значение на одну пятую, выполните гамма-коррекцию (сделайте изображение ярче), добавьте больше контраста, добавьте больше контраста, сохраните. Наконец, добавьте сероватую виньетку (немного обесцвечивает края) и «перевернутую» оранжевую виньетку для эффекта прожига цвета.

Совет: Вы можете даже добавить белую рамку для полного эффекта; просто добавьте $this->border($this->_tmp, 'white'); перед $this->output(); ,

Тостер-фильтр

Нэшвилл

У Нэшвилла хорошее модное фото 80-х. Это производит изображение с пурпурным / персиковым оттенком. Это дополнительно добавляет рамку, чтобы придать этому слайду вид. Это легко один из самых популярных фильтров Instagram.

01
02
03
04
05
06
07
08
09
10
11
12
public function nashville()
{
    $this->tempfile();
     
    $this->colortone($this->_tmp, ‘#222b6d’, 100, 0);
    $this->colortone($this->_tmp, ‘#f7daae’, 100, 1);
     
    $this->execute(«convert $this->_tmp -contrast -modulate 100,150,100 -auto-gamma $this->_tmp»);
    $this->frame($this->_tmp, __FUNCTION__);
     
    $this->output();
}

На английском языке: создайте рабочий файл, загрузите изображение в память, измените чёрный цвет на индиго, измените белый цвет на персиковый, увеличьте контраст, увеличьте насыщенность вдвое, автокоррекцию гаммы Добавить кадр из файла PNG.

Нэшвилл фильтр

Ломо

Ломография — это создание высококонтрастных фотографий с виньетками и мягким фокусом (куда бы вы ни пошли). В реальной жизни они в основном сделаны с использованием Holga, LOMO LC-A или так называемых игрушечных камер (камеры с пластиковым объективом). Этот эффект довольно легко воссоздать; мы просто увеличим контраст красного и зеленого каналов на треть и добавим виньетку. Не стесняйтесь экспериментировать, как вы хотите.

01
02
03
04
05
06
07
08
09
10
11
public function lomo()
{
    $this->tempfile();
     
    $command = «convert {$this->_tmp} -channel R -level 33% -channel G -level 33% $this->_tmp»;
     
    $this->execute($command);
    $this->vignette($this->_tmp);
     
    $this->output();
}

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

Совет: если вы предпочитаете эффект ломо без виньетки, просто закомментируйте или удалите этот раздел кода.

Ломо фильтр

кельвин

Названный в честь лорда Кельвина, этот эффект накладывает сильное персиковое / оранжевое наложение и добавляет размытую фоторамку.

01
02
03
04
05
06
07
08
09
10
11
12
13
public function kelvin()
{
    $this->tempfile();
     
    $this->execute(«convert
    ( $this->_tmp -auto-gamma -modulate 120,50,100 )
    ( -size {$this->_width}x{$this->_height} -fill ‘rgba(255,153,0,0.5)’ -draw ‘rectangle 0,0 {$this->_width},{$this->_height}’ )
    -compose multiply
    $this->_tmp»);
    $this->frame($this->_tmp, __FUNCTION__);
 
    $this->output();
}

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

Фильтр Кельвина

Как пользоваться

Эти эффекты легко использовать! Я предполагаю, что вы сохранили весь код в файле instagraph.php . Теперь создайте файл с именем filter.php и скопируйте приведенный ниже код, который вам подходит.

Если вы хотите применить только один фильтр к изображению, вы можете сделать это следующим образом:

01
02
03
04
05
06
07
08
09
10
11
12
13
require ‘instagraph.php’;
 
try
{
    $instagraph = Instagraph::factory(‘input.jpg’, ‘output.jpg’);
}
catch (Exception $e)
{
    echo $e->getMessage();
    die;
}
 
$instagraph->toaster();

Это оно! Теперь, если вы хотите применить все фильтры к одному изображению, используйте этот код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
require ‘instagraph.php’;
 
try
{
$instagraph = Instagraph::factory(‘input.jpg’, ‘output.jpg’);
}
catch (Exception $e)
{
    echo $e->getMessage();
    die;
}
 
// loop through all filters
 
foreach(array(‘gotham’, ‘toaster’, ‘nashville’, ‘lomo’, ‘kelvin’) as $method)
{
    $instagraph->_output = $method.’.jpg’;
    $instagraph->$method();
}

Теперь просто откройте его в своем браузере и наслаждайтесь результатами!

Производительность

Производительность, безусловно, важная часть каждого приложения. Поскольку среднее время применения фильтра к изображению составляет примерно 1 секунду, мы можем с уверенностью сказать, что это довольно быстро!

Ресурсы ImageMagick

Чтобы узнать больше об ImageMagick, вот список ссылок на все команды и опции, которые использовались в этих методах фильтра:

  • конвертировать :
  • модулировать : изменить яркость, насыщенность и оттенок
  • контрастность : увеличение или уменьшение контрастности изображения
  • размер : ширина и высота изображения
  • fill : цвет, используемый при заполнении графического примитива
  • рисовать : комментировать изображение с графическим примитивом
  • составить : установить оператор составного изображения
  • канал : применить опцию для выбора каналов изображения
  • уровень : настроить уровень контрастности изображения
  • auto-gamma : автоматически настраивать уровень гаммы изображения
  • гамма : уровень гамма-коррекции

Кроме того, вот список сценариев ImageMagick, учебных пособий и примеров:

Резюме

В этом уроке мы немного узнали об Imagemagick и продемонстрировали его мощь, создав фильтры, аналогичные тем, которые были созданы в Instagram. Мы создали Instagraph !

Если вам нужна помощь или вам нужна помощь в создании дополнительных фильтров, таких как Tilt Shift или Earlybird , дайте мне знать в комментариях, и я сделаю все возможное, чтобы помочь!

43
Share: