译者注:这篇文章涉及图像处理,非常有趣,同时可以用来构建云加端的移动拍照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像素。

GD

在下面的例子中,我们必须调用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的脚本、教程和示例。

  • Fred’s ImageMagick Scripts
  • Imagemagick Examples by AnthonyThiessen

总结

在本教程中,我们学到了ImageMagick,通过创建类似Instagram的滤镜表现出了它的力量。我们实现了Instagraph!
        如果你需要任何帮助,或需要援助来创造其他的滤镜,例如Tilt ShiftEarlybird,在评论里告诉我,我会尽我所能来协助你。

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

转载于:https://www.cnblogs.com/android-html5/archive/2012/03/26/2533719.html

用PHP实现Instagram滤镜效果相关推荐

  1. Instagram为何如此受欢迎?

    Instagram为何如此受欢迎? 2011-11-28 15:02 原创 annie 0条评论 曾问了自己无数次为什么有那么多图片分享应用,那么多竞争对手而Instagram却如此受欢迎?在355天 ...

  2. 图像滤镜艺术---(Instagram)1977滤镜

    原文:图像滤镜艺术---(Instagram)1977滤镜 图像特效---(Instagram)1977滤镜 本文介绍1977这个滤镜的具体实现,这个滤镜最早是Instagram中使用的 ,由于Ins ...

  3. Instagram Win10 UWP版更新:新增故事滤镜等大波功能

    Win10 PC和Win10 Mobile上的Instagram近期迎来更新.Win10 PC和平板版<Instagram>版本升级到10.1096.22724,Win10 Mobile版 ...

  4. Android开源滤镜 仿instagram

    前段时间做一个项目的时候发现一个不错的滤镜库,是仿Instagram效果的,能够实现Lomo在内的十几种滤镜效果,git地址是: https://github.com/beartung/insta-f ...

  5. Instagram对比评测:让山寨惭愧的用心移植

    在一个月前本站就报道过图片分享应用Instagram即将发布Android版的消息,而前天终于正式发布,有趣的是,虽然大部分仅仅是界面的调整,但它的Android版和iOS版本的区别比某些山寨应用和原 ...

  6. 站在艺术和算法十字路口的Prisma,会成为第二个Instagram吗?

    仅仅用了两周时间,25岁的小伙Alexey Moiseenkov和他的团队就完成了一件拿破仑和希特勒都没能做到的事:占领俄罗斯. Moiseenkov是科技公司Prismatic的创始人,这家总部位于 ...

  7. Instagram赢家通吃照片社交市场 对手一个个只有关门大吉

    在PC互联网时代,赢家通吃是商业准则之一,在移动互联网时代,这一法继续生效. 在移动照片分享和社交市场,Facebook旗下的Instagram已经成为一家独大,更多的对手正在选择关门. 据美国科技新 ...

  8. 字节跳动 录屏功能_一周盘点:Instagram打通视频购物功能 公开叫板TikTok;字节跳动要大力布局跨境出口电商?...

    周末刚结束,预祝各位小伙伴们在接下来的每一天都能大卖! 大师兄先带你盘点这一周都有哪一些跨境电商热点事件: 每周要点 Instagram打通视频购物功能 公开叫板TikTok 据外媒报道,Instag ...

  9. php更新用户数据为空,php – Instagram实时更新标签 – 获取空数据,为什么?

    Heloo, 我正在开发一个项目,我需要从Instagram获得某些标签的实时更新. 这是我创建订阅的代码 $client_id = 'MOJID'; $client_secret = 'MOJIDS ...

最新文章

  1. php不重复随机加时间毫秒,PHP实现的毫秒定时器,同时解决进程不重复堆积
  2. 改善用户体验之密码强度提示
  3. mfc CString 转 char *
  4. NYOJ128前缀式计算
  5. 2分钟学会ajax 入门ajax必备
  6. 关于form组件的补充-------formChoice
  7. 安装mysql数据库要注意的
  8. 面试又栽在JVM上了!
  9. 【今日CV 计算机视觉论文速览 第106期】Fri, 26 Apr 2019
  10. ComboGrid 行内点击编辑内容
  11. 如何利用pandas将时间戳格式化日期字符串呢?
  12. [CMake] 头文件路径 动态库路径
  13. Gym - 100625G Getting Through 计算几何+并查集
  14. Datalogic 得利捷推出超级灵活且坚固可靠的PowerScan 9600 系列 庆祝公司成立50周年
  15. SQLyog 使用教程
  16. 鉴源实验室丨TARA分析方法论
  17. 如何用ping 命令简单测试网速
  18. 如何评价一个好系统?
  19. 多目标应用:多目标蜣螂优化算法求解多旅行商问题(Multiple Traveling Salesman Problem, MTSP)
  20. 本地客户端(自己的电脑)连接远程Oracle数据库(服务器端),客户端安装步骤

热门文章

  1. 什么是ISO 21434?给汽车软件开发人员的合规贴士
  2. ●「.|貓」erPhotoshop滤镜巧制超级美女插画效果
  3. 毕业生做了这个考研论坛系统,使用的是SSM框架和JSP技术
  4. 英雄联盟全球总决赛历届冠军名单
  5. 家装软件相关算法和技术归纳
  6. eclipse导入python文件夹_eclipse+pydev 怎么导入已有的python项目
  7. k8s拉取镜像规则_【大强哥-k8s从入门到放弃13】Service详解
  8. (病毒安全)任何杀毒软件都不能用了
  9. vue打包后在ie浏览器下访问报语法错误
  10. 软工视频到底在讲什么?