用PHP實現Instagram濾鏡效果

本文轉載自查看原文 2012-03-26 20:16 3323 網站開發/ 應用開發/ PHP/ 移動開發

譯者注：這篇文章涉及圖像處理，非常有趣，同時可以用來構建雲加端的移動拍照App。

教程細節

程序：PHP/ImageMagick
難度：中級
預計完成時間：45分鍾

你將創建的最終作品

下載源文件

在本教程中，我將演示如何用PHP和ImageMagick創建像Instagram一樣效果的老照片。是的，你可以用PHP和ImageMagick來完成這件事，而且這只是最簡單的事情！

我們創建數碼老照片，然后讓它變得很酷

曾幾何時 - 22年以前（在PHP出現5年前）ImageMagick誕生了。從那時起，它已經發展成為一個獨立的軟件平台來創建、編輯、生成或者轉換光柵圖像（支持超過100種格式！）。你可以用它來調整圖像大小，制作圖像鏡像，翻轉、旋轉、扭曲、剪切和轉換圖像，調整圖像顏色，應用各種特殊效果，或者繪制文本、線條、多邊形、橢圓和貝塞爾曲線。它完全擁有你在Web開發中處理圖像、處理視頻、生成全景圖所需要的一切。但是請注意，它不是一個GUI的圖像編輯器。

ImageMagick就是Web上的Photoshop命令行。

PHP圖像處理

PHP捆綁了GD （GIF繪制/圖形繪制），這是一個動態創建圖像庫。它可以用於簡單的圖像操作，如縮放、裁剪、添加水印、創建縮略圖（傑弗里寫的），應用基本的照片濾鏡-你可能已經用過它。不幸的是，如果你要創建像Instagram濾鏡一樣更復雜的效果，GD無法實現。不過，幸運的是，我們有ImageMagick！

GD vs. ImageMagick

它們不能在高層次上來進行對比，因此我們將使用一個簡單的例子，例如調整尺寸。想象一下，我們已經上傳了一個新的1024×768像素的photo.jpg圖像，我們要動態的把它的大小調整為640×480像素。

在下面的例子中，我們必須調用6個函數，如果我們有可變寬高比時還可能要執行一些計算。

$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擴展，使用ImageMagick的API來創建和修改圖像。唯一的缺點是：你將有可能用PECL來安裝，它的共享主機有時會有一些連接問題。

$image= newImagick('photo.jpg');
$image->resizeImage(640, 480,imagick::FILTER_LANCZOS, 0.9);

更簡單的方法是使用PHP的命令行（也是我們將要用到的）。

exec('mogrify -resize 640x480 photo.jpg');

就是它了！相當完美。

安裝ImageMagick

雖然基本上每一個不錯的服務器托管商都提供了ImageMagick安裝，但是你可能在本地服務器上並沒有安裝，因為它並沒有被PHP所捆綁。

不過安裝ImageMagick是一件很容易的事情。訪問ImageMagick下載頁面，選擇你服務器的操作系統（Unix/Mac/Win），並且選擇所推薦的包。只要遵循簡單的說明，你就不會犯錯。

一旦完成安裝，轉到終端命令提示符下，輸入“convert”並且回車，如果你得到一系列選擇項而不是“Command not found”，證明你已經安裝成功。請注意你並不需要在PHP里進行任何配置。

Instagram是如何工作的？

說實話，我也不知道Instagram團隊使用什么技術來進行圖像處理。ImageMagick在iOS下也同樣可用，也許這就是Instagram的魔力源泉？引用Instagram CEO和聯合創始人Kevin Systrom的話如下。

“它確實是許多不同方法的組合。在某些情況下，我們在圖像上繪畫；另外一些情況下我們進行像素運算。這真的取決於我們想要的效果。”

例如，Lomo-fi在有高對比度的圖像上不太有效，而Toaster是最復雜（同時很慢，也很受歡迎）的濾鏡之一。

我不再描述更多的信息，但它會是我們的秘密武器：）也許有一天…

“也許有一天…”對我們來說並不足夠，Systrom先生。我們接受挑戰。

Show Me The Code！

我們將要模仿實現gotham、toaster、nashville、lomo和kelvin濾鏡效果。

Instagraph – PHP類

我曾經創建了一個小的PHP包裝類來使圖像處理的過程盡量的簡單。如你所知，在這些濾鏡里，我們有許多的：

Colortone：將會給一副圖片用高亮或者陰影着色。例如, 我們希望將黑色變為紫色。
Vignette：圖像的邊緣淡出或逐步去色。我們甚至可以進行翻轉或者為暈影着色。
Border：為圖片添加邊框。例如, 我們希望有一個黑色或白色，或者任意一個一定寬度的彩色邊框。注意邊框的寬度將會增加圖片的尺寸。
Frame：將讀取指定的相框並拉伸來適合圖片。Nashville和kelvin濾鏡需要用到。
Tempfile：創建臨時文件（原始圖片的副本）。
Output：簡單重命名工作副本。
Execute：我們將通過這個方法發送所有命令，來防止使用shell腳本時發生錯誤。

我提到這些以便於我們能跳到有趣的部分。創建一個名為 instagraph.php的新文件，但后復制和粘貼下面的代碼。

/**
 * Instagram filters with PHP and ImageMagick
 *
 * @package    Instagraph
 * @author     Webarto <dejan.marjanovic@gmail.com>
 * @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? '-negate': '';
 
        $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類來支持下面的新方法。下載的包里提供了圖像的相框，它們都是PNG的透明圖片。下面讓我們開始。

原始圖片

這是我的狗在沙灘上享受生活的照片。它是我相機的作品。

Gotham

濾鏡生成一張黑白、有淺藍底色的高對比度的圖像。在現實生活中，這會用Holga相機和Ilford X2膠片來實現。

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();
}

文字解釋：創建一個工作文件，將圖像加載到內存，提高一點亮度和飽和度，改變剩下的顏色為深紫色，伽馬校正，增加更多對比度，把所有改變保存到一個文件中。添加一個20像素的黑色邊框。是不是很簡單？

Toaster

Toaster濾鏡類似於老寶麗來相機的效果，它有以粉紅色或橙色為發光中心的鮮艷顏色。按Instagram CEO的話來說，它是最難實現的效果之一。

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->output();前添加代碼$this->border($this->_tmp,'white');.

文字解釋：創建一個工作文件，將圖像加載到內存，將黑色變為暗紅色，提高亮度，將飽和度設為1/5，執行伽瑪校正（使圖像更亮），添加更多對比度並保存。最后，添加一個灰色的暈影（邊緣去掉一點飽和度）以及一個實現色彩燃燒效果的橙色翻轉暈影。

Nashville

Nashville有很棒的80年代時尚掉色照片似的感覺。它通過洋紅和桃紅色調產生圖片。此外，它還添加一個相框來獲得幻燈片的外觀。這是最容易實現並且最流行的Instagram濾鏡之一。

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文件添加相框。

Lomo

Lomography就是通過相框和柔焦來創建高對比度的照片。在現實生活中，這種效果大多通過Holga，LOMO LC-A或者所謂的玩具相機（有塑料鏡片的照相機）來實現。這種效果相當容易重現，我們將紅色和綠色通道的對比度簡單的提高1/3，並且添加一個相框。你可以隨意進行實驗。

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();
}

提示：如果你喜歡沒有暈影的Lomo效果，只需要注釋掉或者移除對應代碼。文字解釋：創建一個工作文件，將圖像加載到內存，將紅色通道的對比度提高1/3，再次將紅色通道對比度提高1/3，應用一個暈影。

Kelvin

這種效果以達爾文命名，它使用了一個強力的桃色和橙色覆蓋層，並且添加了一個掉色的相框。

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();
}

文字解釋：創建一個工作文件，將圖像加載到內存，規范化，提高1/5的亮度，提高飽和度的一半，創建一個桃色和橙色的覆蓋層，並且應用多重混合模式。最后，使用PNG文件添加一個相框。

如何使用

你可以很容易地使用這些效果！我假定你會在instagraph.php文件內保存所有代碼。現在，創建一個文件，名為filter.ph並復制下面你需要的代碼。

如果你只想在圖像上應用一種濾鏡，你可以這樣做：

require 'instagraph.php';
 
try
{
    $instagraph = Instagraph::factory('input.jpg', 'output.jpg');
}
catch (Exception $e)
{
    echo $e->getMessage();
    die;
}
 
$instagraph->toaster(); // name of the filter

就是它了。現在，如果你想為一副圖像使用所有的濾鏡，使用如下代碼。

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'; // we have to change output file to prevent overwrite
    $instagraph->$method(); // apply current filter (from array)
}

現在只需要在瀏覽器里打開這個頁面，你就可以得到想要的結果。

性能

性能肯定是每個應用的重要組成部分。因為為一副圖像應用濾鏡的平均時間大約是1秒，我們可以肯定地說相當快！

ImageMagick資源

要了解更多關於ImageMagick的信息，下面有我們在濾鏡方法里所有曾用到的命令和選項的鏈接列表：

convert:
modulate: 調整亮度，飽和度和色相
contrast: 提高或降低圖像的對比度
size: 調整圖像高度或寬度
fill: 當填充原始圖形時着色
draw: 使用原始圖形來標注圖像
compose: 設置圖像合成操作
channel: 應用選項來選擇圖像通道
level: 調整圖像對比度水平
auto-gamma: 自動調整圖像伽馬水平
gamma: 伽馬校正的水平

此外，這兒還有一些ImageMagick的腳本、教程和示例。

總結

在本教程中，我們學到了ImageMagick，通過創建類似Instagram的濾鏡表現出了它的力量。我們實現了Instagraph！
如果你需要任何幫助，或需要援助來創造其他的濾鏡，例如Tilt Shift或Earlybird，在評論里告訴我，我會盡我所能來協助你。

譯自：http://net.tutsplus.com/tutorials/php/create-instagram-filters-with-php/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 iOS濾鏡實現之Nashville【instagram】 Android開源濾鏡仿instagram android 下濾鏡效果的實現多媒體開發（6）：用濾鏡實現各種圖片效果 Android:通過濾鏡實現點擊圖片變暗效果 OpenCV 圖像處理的各種濾鏡效果實現用原生css實現高斯模糊、黑白等濾鏡效果 FFmpeg 濾鏡及其效果 canvas濾鏡6種效果嗎高斯模糊濾鏡效果解析