注意本篇文适用于:
零基础小白想要了解一下php开发或者网站开发的同学(但是注意,零基础你可以通过本篇完成,但是由于是速成会有一些难度,本篇内容由于是速成,有一些额外知识点,不会可以来问我1_bit)学过php的同学,但是懵懵懂懂做不出东西的有一些web开发经验的同学,可能看一下就会了
demo 效果演示如下:
一、环境
语言:php7.+、html
服务器:华为云
环境:lnmp1.7
1.1 为什么选择php
那是因为php有一个非常棒的库 Grafika,可以让你进行图片合成、裁剪、九宫格裁剪、gif压缩等;那些很多网上的图片工具箱功能都可以实现,甚至可以对比相似度。
Grafika 可以到官网下载:https://kosinix.github.io/grafika/,最后解压到目录中即可,搞不懂的到文末找我拿或者问我怎么用都行。
Grafika还提供了各种滤镜,美化图片。
1.2 为什么选择华为云
怎么说呢这个,有以下几个点:
1.毕竟这一篇是初级文,作为新手选择我比较懒,在华为云中直接可以介绍当前服务器的性能偏向,挺好的,对于新手来说直接看自己的选择就可以了,你不信你看下面这个(因为买这个服务器几个月之后发现我亏钱了,不信你们接着往下看):
第二点还有啥?当然是价格了,对于其他服务器来说华为云是比较优惠的,我就买了一个通用的HECS才60块钱一个月,拿起来做测试非常方便:
我不是说是60的吗,怎么是28块钱了?
这是单个服务器的价钱,进去后还会有其他付费的:
好了,你们以为这价钱够便宜了?!不不,事情还没完,因为我这篇文章写了一直没发,结果现在进去发现 35 可以买一年!原来我之前买亏了呀…
这是活动界面:
给你们链接:点这里进活动页
赶紧去买吧,不然都被抢完了。
最后购买之后重置密码:
接下来使用putty登录到服务器,点击open:
接着输入帐号密码:
此时将会进入到控制台:
接下来使用以下命令安装php环境:
wget /lnmp/lnmp1.7.tar.gz -cO lnmp1.7.tar.gz && tar zxf lnmp1.7.tar.gz && cd lnmp1.7 && ./install.sh lnmp
复制确认后将会自动开始安装,安装完成后将会出现如下内容:
安装完毕后 enjoy it:
此时php是默认不报错的,咱们找到 php.ini,将 display_errors 改成 On 开启报错:
此时还需要开启一些权限,否者在进行一些操作时会提示 “Permission denied”。
二、php 入门
注意:以下知识点不代表所有 php 知识点,该知识点只基本出现于示例所需。
2.1 php 基本
php 以 <?php 开始 ?> 结束,意思是 php 代码需要写在这一堆符号之内:
<?phpphp 代码写在这?>
2.2 输出
php 语言输出很简单,只需要 echo 后面接一段字符串就ok。在php 中字符串使用单引号或者双引号标记,但是单引号和双引号有区别,基础过一遍知识点的话就不在赘述不同。
例如 字符串可以写成 “这是个字符串” 或 ‘这是个字符串’。代码示例如下:
<?phpecho "这是个字符串";?>
2.3 变量
php变量很简单,只需要使用一个美元符 “$” 后面写变量名即可创建一个变量,例如:
$a=10;
同样,变量也可以进行相加减:
$a=10;$a=$a+10;
在php 中字符串连接使用“.”,例如:
$a="你好";$b="小明";echo $a.$b;
此时将会显示 “你好小明”。
2.4 判断
在php 中 if 语句表示判断,例如如下示例:
$a="你好";$b="小明";if($a=="小明"){echo '变量a为小明';}
同样 php 支持 else 与 elseif 语句,如下所示:
$a="你好";$b="小明";if($a=="小明"){echo '变量a为小明';}elseif($a=="小绿"){echo '变量a为小绿';}else{echo '我也不懂变量a是什么';}
2.5 数组
php 中的数组使用 array 创建,例如:
$a=array();
php中的数组赋值也很简单,可以在创建的时候给予:
$a=array('小明',10,'小绿');
也可以使用下标给予:
$a=array();$a[0]='小明';$a[1]='小绿';
2.6 循环
php 中循环一般可以使用 for 或者 foreach。
for 可以给予一个循环控制变量控制,例如如下:
$a;for($a=0;$a<10;$a++){echo $a;}
以上就是一个基本 for 循环的代码示例。创建变量 a 后并没有赋值,随后使用 for 循环在括号内赋值为0,使用分号进行间隔,随后一个条件是变量a小于10,接着是 a++。此循环只有满足条件 a不大于10才能循环,每次循环变量a都加1,每次循环内容为输出显示变量 a 的内容。
第二个循环是 foreach,foreach 一般用于遍历,例如有一个数组:
$a=array('小明',10,'小绿');foreach($a as $v){echo $v;}
此时foreach括号内的内容表示从数组a 中进行取值,每次使用 foreach 进行变量,第一次取值到变量v 为小明,接下来为10,组后为小绿,并且将他们进行输出显示。
2.7 类的使用方法
在本节中我们将会使用两个冒号“::”创建一个对象,这是一种创建对应类对象的方式,在此处不赘述过多内容,例如咱们接下来将会看到的代码:
$editor = Grafika::createEditor();
在这里你可以理解成Grafika::createEditor()
是一个美化图片的工具箱,在这里这代码表示创建,创建完毕后给予到$editor
进行存着,这样$editor
就等于是一个工具箱了。
接下来这个工具箱有很多功能,例如像让图片压缩,那么图片压缩在日常中用软件需要点击一个按钮,在此咱们只需要将这个功能按钮变成代码,这个功能有一个名称,例如如下代码:
$editor->resizeFit($image , $_GET['width'] , $_GET['height']);
以上代码中resizeFit
就是这个功能,$editor
就是工具箱,->
就等于是你按下这个按钮的动作;我们还可以发现在resizeFit
之后的圆括号中还有一些内容$image , $_GET['width'] , $_GET['height']
,这些内容指的就会参数,例如在这里$image
就表示你要操作的那张图片,$_GET['width']
就是需要操作(变换)的宽度,$_GET['height']
则是高度。
三、实现流程
3.1、首页制作
首先我们在赋值 grafika 第三方到目录 /home/wwwroot/default 目录之下:
其中 wwwroot 目录就是 lnmp php 环境安装包默认的目录。我们在 grafika 目录下新建一个文件名为 index.php:
接着在 index.php 中编写 html 代码作为首页。由于首页都是 html 内容,在此不再过渡赘述,只简要讲解。想学 html 的后期我再写相关文章即可。
首先在 index.php 中编写一个 head 头:
<head><style type="text/css"> .title{width:100%; height:80px; line-height:80px;text-align:center;background: -webkit-linear-gradient(top, #FF99CC, #CCFF66);} .font{font-color:#FFFFFF;font-size:20px;}</style> </head>
这个头中有一个 style 节点,在 style 中主要有两个内容,一个是定义了一个 class 为 title,给title 类编写了一个渐变色样式,接着后面 font 类,font 类主要是设置字体宽高和字体颜色。
接着我们看我们的 body 部分:
<body><script src="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><div class="title"><h1 style="color:#FFFFFF;">图片处理工具箱</h1></div></body>
首先引入一个 jq,因为接下来需要使用 ajax 在无刷新时上传文件。然后创建了一个 div,使用了 title 类,在这个 div 下,使用了一个 h1,作为头,此时这个页面如下:
接下来咱们创建一个 div,使其宽度占满整个屏幕,在这个 div 中创建一个 form 表单,用于选择需要上传的图片:
<div style="width=100%"><form enctype="multipart/form-data"><input type="file" name="file" ></form><button onclick="upload()">提交</button></div>
以上 form 中并不使用 submit 做为提交,在此使用了 一个 button,对应一个 JavaScript(以下简称js)函数 upload,这个函数我们之后再进行编写。
接着我们创建接下来我们需要的功能操作UI。因为我们的操作大多数需要用户指定宽高,这个时候我们需要两个 input 作为输入,一个作为宽一个作为高,并且需要使用一个 button 作为确认按钮,并且将这3个元素使用一个 div 进行包裹,放到另一个 div 中;接着给包裹着3个元素的 div 设定style,并且使用左浮动,使其呈一行显示:
<div style="width:100%;"><div style="width:19%;float:left;margin-left:1%"><input placeholder="宽" style="width:100%;" id="resizeFit_Width"><input placeholder="高" style="width:100%;" id="resizeFit_Height"><button style="width:100%;" onclick="resizeFit()">等比缩放</button></div></div>
接下来再添加几个 div ,使其对应其功能,这部分完整代码如下:
<div style="width:100%;"><div style="width:19%;float:left;margin-left:1%"><input placeholder="宽" style="width:100%;" id="resizeFit_Width"><input placeholder="高" style="width:100%;" id="resizeFit_Height"><button style="width:100%;" onclick="resizeFit()">等比缩放</button></div><div style="width:19%;float:left;margin-left:1%"><input placeholder="宽" style="width:100%;" id="resizeExact_Width"><input placeholder="高" style="width:100%;" id="resizeExact_Height"><button style="width:100%;" onclick="resizeExact()">固定缩放</button></div><div style="width:19%;float:left;margin-left:1%"><input placeholder="宽" style="width:100%;" id="resizeFill_Width"><input placeholder="高" style="width:100%;" id="resizeFill_Height"><button style="width:100%;" onclick="resizeFill()">居中剪裁</button></div><div style="width:19%;float:left;margin-left:1%"><input placeholder="宽" style="width:100%;" id="resizeFill_ExactWidth"><input placeholder="高" style="width:100%;" id="resizeFill_ExactHeight"><button style="width:100%;" onclick="Grids()">九宫格裁剪</button></div><div style="width:19%;float:left;margin-left:1%"><form enctype="multipart/form-data" action="/grafika/compressedgif.php" method="POST"><input style="width:100%;" type="file" name="file" ><input placeholder="宽" style="width:100%;" name="Width"><input placeholder="高" style="width:100%;" name="Height"><input type="submit" value="gif压缩"></form></div></div><div class="picDis"><img src="" alt=""></div>
接下来编写所需的 js 函数,首先从 upload 函数开始:
var imgPath=''//上传function upload (){var formData = new FormData($('form')[0]);formData.append('file',$(':file')[0].files[0]);$.ajax({url:'update.php',type: 'POST',data: formData,contentType: false,processData: false,success:function(data){console.log(data)var srcPath = data;console.log();$('.pic img').attr('src', '..'+srcPath);imgPath=srcPath}})}
该函数使用了一个 ajax,响应当前目录下的 update.php(打错了英文,不过不要在意),该函数主要是上传对应的图片到服务器之中。
该部分的其他 js 代码如下,在此不再过多赘述,想学的可以到文章末找我提想学js,人多我后面就开教程了。
该部分的其他 js 代码如下:
<script>var imgPath=''//gif压缩function compressedGif(){if(imgPath==''){alert("请上传图片");return;}window.open('/grafika/compressedgif.php');}//九宫格裁剪function Grids(){if(imgPath==''){alert("请上传图片");return;}var resizeFill_ExactWidth=document.getElementById('resizeFill_ExactWidth');var resizeFill_ExactHeight=document.getElementById('resizeFill_ExactHeight');var parameter='?width='+resizeFill_ExactWidth.value+'&height='+resizeFill_ExactHeight.valuewindow.open('/grafika/grids.php'+parameter);}//居中剪裁function resizeFill(){if(imgPath==''){alert("请上传图片");return;}var resizeFill_Width=document.getElementById('resizeFill_Width');var resizeFill_Height=document.getElementById('resizeFill_Height');var parameter='?width='+resizeFill_Width.value+'&height='+resizeFill_Height.valuewindow.open('/grafika/resizefill.php'+parameter);}//固定缩放function resizeExact(){if(imgPath==''){alert("请上传图片");return;}var resizeExact_Width=document.getElementById('resizeExact_Width');var resizeExact_Height=document.getElementById('resizeExact_Height');var parameter='?width='+resizeExact_Width.value+'&height='+resizeExact_Height.valuewindow.open('/grafika/resizeexact.php'+parameter);}//等比例缩放function resizeFit(){if(imgPath==''){alert("请上传图片");return;}var resizeFit_Width=document.getElementById('resizeFit_Width');var resizeFit_Height=document.getElementById('resizeFit_Height');var parameter='?width='+resizeFit_Width.value+'&height='+resizeFit_Height.valuewindow.open('/grafika/resizefit.php'+parameter);}//上传function upload (){var formData = new FormData($('form')[0]);formData.append('file',$(':file')[0].files[0]);$.ajax({url:'update.php',type: 'POST',data: formData,contentType: false,processData: false,success:function(data){console.log(data)var srcPath = data;console.log();$('.pic img').attr('src', '..'+srcPath);imgPath=srcPath}})}</script>
这样一个首页的代码就完成了。在此我们得知我们需要编写 update.php、resizefit.php、resizefill.php、resizeexact.php、grids.php 这5个 php 代码。
3.2 update.php 上传编写
编写 update.php 文件代码很简单,首先咱们要开启 seesion。
为啥要开启 seesion 呢?这是因为保存了seesion 后我们就知道了用户上传的图片位置,之后用户直接输入宽高即可进行裁剪等操作。代码如下:
session_start();
接着咱们得给这个图片一个名字。那么在起名的时候我们需要防止重名,那如何防止重名呢?咱们可以使用时间戳,时间戳就是当前时间从一个起始时间节点的描述,当然这样做并不是很严谨,不过咱们初级文就简单为主就这样就ok了。代码如下:
$filename=time().$_FILES["file"]["name"];
$filename 是我们的变量名,time() 是获得时间戳,并且在此又加上了本来上传文件的 filename 也就是文件名,这个时候就组成了 当前时间戳+文件名 的组合,这样就初步完成了这个防止重名的操作。
接下来我们的下一步要给当前图片的一个保存位置,这个也较为简单,直接路径加文件名就好(记得在此创建一个文件夹名称为 img):
$path ="./img/".$filename;
接下来咱们可以拼接当前页面的访问 url(当然只是用作返回,用处说大不大):
$fileurl='/grafika/img/'.$filename;
接着使用 move_uploaded_file 方法使当场上传的文件存入到 $path 这个路径下:
move_uploaded_file($_FILES["file"]["tmp_name"],$path);
再使用 seesion 存储到当前图片:
$_SESSION['path']=$path;
接着使用 echo 进行输出,就等于是当前 php 文件返回的文本内容:
echo $fileurl;
这部分的完整代码如下:
<?phpsession_start();$filename=time().$_FILES["file"]["name"];$path ="./img/".$filename;$fileurl='/grafika/img/'.$filename;move_uploaded_file($_FILES["file"]["tmp_name"],$path);$_SESSION['path']=$path;echo $fileurl;
超简单吧,我们继续做下一个吧。
3.3 resizefit.php 等比例缩放编写
等比例缩放编写很简单,首先 require_once 和 src 目录下的 autoloader.php 文件,随后 use Grafika\Grafika 即可引入Grafika :
require_once 'src/autoloader.php';use Grafika\Grafika;
接着开启seesion:
session_start();
随后创建一个 Grafika 的 createEditor:
$editor = Grafika::createEditor();
接下来使用 Grafika 打开一张图片,由于之前上传已经把一张图片存入到 seesion 之中,那么接下来只需要使用创建的 $editor 对象使用 open 方法传入一个变量与一个图片路径即可打开:
$editor->open($image , $_SESSION['path']);
接着使用 resizeFit 方法进行等比例缩放,传入图片以及缩放长宽进行比例缩放:
$editor->resizeFit($image , $_GET['width'] , $_GET['height']);
接着组合一个路径作为存储路径:
$newPath='./img/'.time().'.jpg';
最后使用 save 方法传入编辑后的图片与保存路径即可保存:
$editor->save($image , $newPath);
接着直接输出即可:
echo '<img src="'.$newPath.'" />';
此部分完整代码如下:
<?phprequire_once 'src/autoloader.php';use Grafika\Grafika;session_start();$editor = Grafika::createEditor();$editor->open($image , $_SESSION['path']); $editor->resizeFit($image , $_GET['width'] , $_GET['height']);$newPath='./img/'.time().'.jpg';$editor->save($image , $newPath);echo '<img src="'.$newPath.'" />';
3.4 resizefill.php 居中剪裁编写
居中裁剪也非常简单,咱们直接看代码:
<?phprequire_once 'src/autoloader.php';use Grafika\Grafika;session_start();$editor = Grafika::createEditor();$editor->open($image , $_SESSION['path']); // 打开yanying.jpg并且存放到$image1$editor->resizeFill($image , $_GET['width'] , $_GET['height']);$newPath='./img/'.time().'.jpg';$editor->save($image , $newPath);echo '<img src="'.$newPath.'" />';
该部分代码与之前的等比裁剪类似,只是更改了一个方法 resizeFill。
3.5 resizeexact.php 固定缩放编写
固定缩放也类似,更改方法为 resizeExact 即可:
<?phprequire_once 'src/autoloader.php';use Grafika\Grafika;session_start();$editor = Grafika::createEditor();$editor->open($image , $_SESSION['path']); // 打开yanying.jpg并且存放到$image1$editor->resizeExact($image , $_GET['width'] , $_GET['height']);$newPath='./img/'.time().'.jpg';$editor->save($image , $newPath);echo '<img src="'.$newPath.'" />';
3.6 grids.php 固定缩放编写
九宫格裁剪不同,九宫格裁剪需要在使用 crop 方法时传入位置的不同参数:'top-left','top-center','top-right','center-left','center','center-right','bottom-left','bottom-center','bottom-right'
,这些参数指定裁剪位置,指定裁剪位置大小需要传入宽高。
咱们可以将位置参数使用一个数组进行存储,随后使用一个 for 循环循环9次即可:
<?phprequire_once 'src/autoloader.php';use Grafika\Grafika;session_start();$editor = Grafika::createEditor();$i=0;$imgs=array();$location=array('top-left','top-center','top-right','center-left','center','center-right','bottom-left','bottom-center','bottom-right');for(;$i<9;$i++){$editor->open($image , $_SESSION['path']);$editor->crop( $image, $_GET['width'] , $_GET['height'], $location[$i]);$newPath='./img/'.time().$i.'.jpg';$editor->save( $image, $newPath );$editor->free( $image );$imgs[$i]=$newPath;}
在循环时,每次打开 seesion 中存储的图片信息,随后使用 crop 进行固定位置裁剪,$location[$i]
则表示传入的裁剪位置,随后通过变量 i 的不同值创建不同的图片,并且使用 imgs 数组存储值。
最后使用 imgs 循环输出即可,为了保证实现九宫格效果,可以直接使图片占据 32% 宽度,距离左边1%宽度即可:
foreach($imgs as $v){echo '<img style="width:30%;margin-left:1%;margin-top:1%" src="'.$v.'" />'; }
3. compressedgif.php gif图片压缩编写
gif 图片压缩也非常简单,直接接收一个图片值,保存到服务器本地后进行操作,操作完毕后使用 resizeFit 方法进行裁剪即可:
<?phprequire_once 'src/autoloader.php';use Grafika\Grafika;session_start();$filename=time().$_FILES["file"]["name"];$path ="./img/".$filename;$fileurl='/grafika/img/'.$filename;move_uploaded_file($_FILES["file"]["tmp_name"],$path);$editor = Grafika::createEditor();$editor->open( $image, $path );$editor->resizeFit( $image, $_POST['Width'], $_POST['Height'] );$newPath='./img/'.time().'.gif';$editor->save( $image, $newPath);echo '<img src="'.$newPath.'" />';
这样就完成了这个站点的制作,不难吧,有疑问可以看文末加我。
php一篇文零基础到制作在线图片编辑网站赚钱(gif压缩 九宫格裁剪 等比裁剪 大小变换)【php华为云实战】