Cara menggunakan filter list php

Dalam tutorial ini, saya akan menunjukkan cara membuat foto (seperti Instagram) vintage dengan PHP dan ImageMagick. Tunggu? Apa? Ya, Anda bisa melakukan hal yang sama dengan PHP dan ImageMagick, dan itu hanya menyentuh permukaannya saja!

Kami Membuat Foto Vintage Digital, Sebelum Itu Keren

Dahulu kala - secara teknis 22 tahun yang lalu (5 tahun sebelum PHP) - ImageMagick dirilis. Sejak itu, ia telah berevolusi menjadi perangkat lunak independen platform yang dapat membuat, mengedit, menulis, atau mengubah gambar raster (lebih dari 100 format yang didukung!). Anda dapat menggunakannya untuk mengubah ukuran, membalik, cermin, memutar, mendistorsi, menggeser, mengubah gambar, menyesuaikan warna gambar, menerapkan berbagai efek khusus, atau menggambar teks, garis, poligon, elips dan kurva Bézier. Ia benar-benar memiliki semua yang Anda butuhkan, saat menangani manipulasi gambar dalam pengembangan web, pemrosesan video, pembuatan panorama, dll. Namun harap dicatat: ini bukan editor gambar GUI.

ImageMagick adalah Photoshop baris perintah untuk web.

Manipulasi Gambar Dengan PHP

PHP dibundel dengan GD (GIF Draw/Graphics Draw), yang merupakan pustaka untuk pembuatan gambar yang dinamis. Ia dapat digunakan untuk operasi gambar sederhana, seperti mengubah ukuran, memotong, menambahkan tanda air, membuat thumbnail (Jeffrey menulis tentangnya), dengan menerapkan filter foto dasar - Anda mungkin pernah menggunakannya sebelumnya. Sayangnya, jika Anda ingin membuat sesuatu yang lebih kompleks dengan GD, seperti efek Instagram, Anda tidak bisa. Untungnya, kita memiliki ImageMagick!

GD vs ImageMagick

Keduanya tidak dapat dibandingkan pada tingkat yang lebih tinggi, oleh karena itu, kita akan menggunakan contoh sederhana, seperti mengubah ukuran. Mari kita bayangkan, kita mengupload gambar foto.jpg 1024x768 yang baru, dan kita ingin mengubah ukurannya menjadi 640x480 piksel secara dinamis.

GD

Pada contoh di bawah ini, kita harus memanggil enam fungsi, dan mungkin melakukan beberapa perhitungan jika kita memiliki aspek rasio variabel.

$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 (singkatan untuk ImageMagick) memiliki pembungkus yang bagus, yang disebut Imagick - ekstensi PHP asli untuk membuat dan memodifikasi gambar menggunakan API ImageMagick. Satu-satunya kelemahannya adalah: Anda mungkin harus menginstalnya dari PECL, yang terkadang menjadi masalah bagi shared hosting.

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

Bahkan yang lebih sederhana, penggunaan baris perintah dengan PHP (inilah apa yang akan kita gunakan):

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

Itu saja! Sangat bagus.

Menginstal ImageMagick

Meskipun hampir setiap perusahaan hosting yang bagus telah menginstal ImageMagick, Anda mungkin tidak memilikinya di mesin lokal, hanya karena ia tidak dikirimkan bersama PHP.
Meskipun, instalasi ImageMagick adalah mudah. Buka halaman Download ImageMagick, pilih platform Anda (Unix/Mac/Win), dan pilih paket yang direkomendasikan. Cukup ikuti petunjuk sederhananya; Anda tidak akan bisa membuat kesalahan di sini.

Setelah selesai, masuk ke terminal/command-prompt Anda, ketik convert dan tekan Enter, jika Anda menerima daftar pilihan dan bukan "Command not found", Anda siap untuk pergi! Perhatikan bahwa Anda tidak perlu mengkonfigurasi apapun di PHP.

Bagaimana Instagram Bekerja?

Nah, sejujurnya, saya tidak tahu sistem apa yang digunakan tim Instagram untuk pengolahan gambar. ImageMagick juga tersedia untuk iOS; mungkin itu keajaibannya bagaimana Instagram bekerja? Mengutip Kevin Systrom, CEO Instagram dan salah satu pendiri:

Ini benar-benar kombinasi dari banyak metode yang berbeda. Dalam beberapa hal, kita menggambar di atas gambar, yang lainnya kita melakukan perhitungan piksel. Ini sangat tergantung pada efek yang akan kita hadapi.

Misalnya, Lomo-fi sebenarnya tidak lebih dari sekedar gambar dengan kontras yang meningkat. Sedangkan Toaster adalah salah satu filter yang paling kompleks (dan lambat, namun populer) yang kami miliki dengan banyak pelintasan dan penggambaran.

Saya akan memberikan lebih banyak info, tapi ini saus rahasia kami :) Mungkin suatu hari nanti...

"Mungkin suatu hari nanti..." tidak cukup baik untuk kita, Mr Systrom. Tantangan diterima!

Tunjukkan Saya Kodenya!

Kita akan menirukan filter gotham (kembalinya gotham), toaster (yang kompleks), nashville (yang populer), lomo (lomo-fi tidak begitu bagus) dan kelvin (lord kelvin - asli).

Instagraph - Kelas PHP

Saya telah membuat sedikit pembungkus kelas PHP untuk mempermudah proses penyaringan gambar sesederhana mungkin. Dalam filter ini, seperti yang Anda tahu, kita memiliki banyak...

• colortone: akan memberi nada warna gambar pada sorotan dan/atau bayangan. Misalnya, kita ingin mengubah warna hitam menjadi ungu.
• vignette: tepi foto memudar atau desaturasi secara bertahap. Kita bahkan bisa membalikkan ini, atau menggunakan warna untuk vignette.
• border: akan menambahkan border pada foto. Misalnya, kita menginginkan border warna putih atau hitam atau warna apapun dengan lebar tertentu; perhatikan bahwa lebar border akan bertambah hingga dimensi foto.
• frame: akan membaca bingkai dan peregangan yang ditentukan agar menyesuaikan dengan foto. Kita membutuhkan ini untuk filter Nashville dan kelvin.
• tempfile: membuat file sementara (salinan dari gambar asli), untuk bekerja dengannya.
• output: cukup mengganti nama copy yang bekerja.
• execute: kita akan mengirimkan semua perintah melalui metode ini untuk mencegah kesalahan yang terjadi saat bekerja dengan shell.

Saya telah membuat semua ini, jadi kita bisa melompat ke bagian yang menyenangkan. Buat file baru, yang disebut instagraph.php, dan copy & paste kode di bawah ini.

/** * Instagram filters with PHP and ImageMagick * * @package Instagraph * @author Webarto <> * @copyright NetTuts+ * @license //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 */ }

Filter Instagram

Kita akan membahas filter, satu per satu; Saya akan menjelaskan metode PHP dan perintah Imagemagick yang diperlukan, termasuk contohnya. Pastikan Anda memperbarui kelas PHP Anda dengan metode baru ini (sisipkan di bawah komentar RESERVED FOR FILTER METHODS). Bingkai foto disediakan dalam paket unduhan; mereka hanya gambar PNG transparan tanpa ekstensi. Anda bebas untuk membuatnya sendiri! Jadi mari kita mulai...

Original

Disini kita hanya punya foto anjing saya menikmati harinya di pantai. Ini langsung dari kamera saya.

Gotham

Filter Gotham menghasilkan gambar kontras tinggi hitam&putih dengan nada kebiruan. Dalam kehidupan nyata, ini akan tercipta dengan kamera Holga dan film 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(); }

Dalam bahasa Inggris: buat file untuk bekerja, muat gambar ke memori, tingkatkan sedikit kecerahan, (hampir) desaturasi, ubah warna yang tersisa menjadi ungu tua, koreksi gamma (nilai di bawah 1 menggelapkan gambar), tambahkan kontras lagi, tambahkan kontras lagi, dan simpan semuanya ke file. Tambahkan border hitam 20px. Sederhana, ya?

Toaster

Filter Toaster menyerupai tembakan Polaroid tua; ini menampilkan warna-warna yang hidup dengan cahaya merah muda/oranye dari pusatnya. Dengan kata-kata CEO Instagram, ini adalah salah satu efek yang paling sulit untuk dibuat; Kita akan mengambil kata-katanya untuk itu.

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

Dalam bahasa Inggris: buat file untuk bekerja, muat gambar ke memori, ganti warna hitam menjadi merah tua, tingkatkan kecerahan, desaturasi hingga yang kelima kali, lakukan koreksi gamma (membuat gambar lebih cerah), tambahkan kontras lebih banyak, tambahkan lebih banyak kontras, simpan. Terakhir, tambahkan vignette keabu-abuan (desaturasi tepinya sedikit), dan vignette oranye "terbalik" untuk efek warna membakar.

Tip: Anda bahkan dapat menambahkan border putih untuk efek penuh; hanya tambahkan $this->border($this->_tmp, 'white'); sebelum $this->output();.

Nashville

Nashville memiliki tampilan foto mode tahun 80-an yang bagus. Ini menghasilkan gambar dengan pewarnaan magenta/peach. Ini juga menambahkan bingkai untuk mendapatkan tampilan slide tersebut. Ini adalah salah satu filter Instagram yang paling populer.

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

Dalam bahasa Inggris: buat file untuk bekerja, muat gambar ke memori, ubah warna hitam menjadi nila, ubah warna putih menjadi warna persik, perbanyak kontras, tingkatkan saturasi setengahnya, koreksi otomatis gamma. Tambahkan bingkai dari file PNG.

Lomo

Lomografi adalah tentang membuat foto kontras tinggi dengan vignette dan fokus lembut (di manapun yang Anda suka). Dalam kehidupan nyata, mereka kebanyakan dibuat dengan Holga, LOMO LC-A atau yang biasa disebut dengan kamera mainan (kamera dengan lensa plastik). Efek ini cukup mudah untuk diciptakan kembali; kita hanya akan meningkatkan kontras saluran merah dan hijau sepertiganya, dan menambahkan vignette. Jangan ragu untuk bereksperimen sesuai keinginan Anda.

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

Buat file untuk bekerja, muat gambar ke memori, tingkatkan kontras saluran merah sepertiganya, tingkatkan saluran merah lagi, terapkan vignette.

Tip: Jika Anda lebih suka efek lomo tanpa vignette, cukup berikan komentar atau hapus bagian kode itu.

Kelvin

Dinamai setelah Lord Kelvin, efek ini menerapkan lapisan warna persik/oranye yang kuat, dan menambahkan bingkai foto tua.

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

Dalam bahasa Inggris: buat file untuk bekerja, muat gambar ke memori, normalkan, tingkatkan kecerahan seperlimanya, desaturasi setengahnya, buat lapisan warna persik/oranye, dan terapkan mode blending multiply. Terakhir, tambahkan bingkai, menggunakan file PNG.

Cara Menggunakan

Sangat mudah untuk menggunakan efek ini! Saya akan berasumsi bahwa Anda menyimpan semua kode di dalam file instagraph.php. Sekarang, buat sebuah file, yang disebut filter.php dan salin kode di bawah ini yang sesuai dengan Anda.

Jika Anda ingin menerapkan hanya satu filter pada gambar, Anda dapat melakukannya dengan cara ini:

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

Itu saja! Sekarang, jika Anda ingin menerapkan semua filter ke satu gambar, gunakan kode ini:

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

Sekarang, buka di browser Anda dan nikmati hasilnya!

Kinerja

Kinerja pastinya merupakan bagian penting dari setiap aplikasi. Karena waktu rata-rata untuk menerapkan filter pada gambar berkisar 1 detik, kita bisa mengatakannya cukup cepat!

Sumber Daya ImageMagick

Untuk mempelajari lebih lanjut tentang ImageMagick, berikut ini daftar tautan ke semua perintah dan opsi yang digunakan dalam metode filter ini:

• convert:
• modulate: memvariasikan kecerahan, saturasi, dan rona warna
• contrast: meningkatkan atau mengurangi kontras gambar
• size: lebar dan tinggi gambar
• fill: warna yang digunakan saat mengisi grafis primitif
• draw: anotasi gambar dengan grafis primitif
• compose: menetapkan gambar komposit operator
• channel: menerapkan pilihan untuk memilih saluran gambar
• level: menyesuaikan tingkat kontras gambar
• auto-gamma: otomatis menyesuaikan tingkat gamma dari gambar
• gamma: tingkat koreksi gamma

Selain itu, berikut adalah daftar skrip, tutorial dan contoh dari ImageMagick:

• Skrip ImageMagick dari Fred
• Contoh Imagemagick oleh Anthony Thiessen

Ringkasan

Dalam tutorial ini, kita belajar sedikit tentang Imagemagick, dan mendemonstrasikan kekuatannya dengan menciptakan filter yang serupa dengan yang dihasilkan oleh Instagram. Kita membuat Instagraph!

Jika Anda memerlukan bantuan, atau memerlukan pertolongan untuk membuat filter tambahan, seperti Tilt Shift atau Earlybird, beri tahu saya di dalam komentar, dan saya akan melakukan yang terbaik untuk membantu Anda!