base64图裁剪 php_世界上最好的编程语言PHP图层裁剪服务搭建详解
IT技术研习社,专注互联网技术研究与分享,喜欢的朋友可以点击【关注】;把经验传递给有梦想的人;
PHP图像裁剪服务搭建
概述
每一个做过WEB程序开发的程序员(比如,博客、电商),应该都有这样的体验,有时候我们需要在不同的页面显示不同尺寸的图片,比如,首页、商品列表页、详情页,如下:
首页
列表页
详情页
以上的需求,每天都在发生,虽然可以通过CSS来控制显示大小。但是如果图片过大,会造成加载的延迟,影响网站整体性能。因此,我们需要一个服务器来帮助我们进行图片的裁剪。传统做法是,上传原图像,然后根据提前规划好的尺寸进行图片的裁剪,然后保存各种尺寸的缩略图,每种尺寸的缩略图都在磁盘上有一个文件及文件名,下次访问时通过图片名称访问不同的缩略图,当有新的尺寸需求时,修改代码,多生成一个尺寸的缩略图,如下类似的代码,假设使用一个函数来生成缩略图:
cutImg(100,100); //裁剪为100*100的缩略图 cutImg(100,200); //裁剪为100*200的缩略图 /* 这时添加一个新需求,500*500 像素的缩略图 */ cutImg(500,500); //这里添加一条代码生成一个新需求
这种方式不够优雅,于是我们想想,有没有办法采用另一种方式,比如,我只上传一张图片,在使用时,通过需求可以显示任务尺寸的缩略图,而且不用预先规划,如:
这是一张原图:
图片地址:http://qiniu.imecho.cn/apic15589.png
1、裁剪 100 * 100
如果这时根据UI的布局需求,需要一张:100px * 100px 的图片
这时我发送一个请求:http://qiniu.imecho.cn/apic15589.png?imageView2/1/w/100/h/100
2、裁剪 200 * 50
如果有一个页面还是显示同一张图片,但这时要求图片大小是: 200px * 50px 的图片
这时我们发送一个请求:http://qiniu.imecho.cn/apic15589.png?imageView2/1/w/200/h/50
发送请求:http://qiniu.imecho.cn/apic15589.png?imageView2/0/w/200/h/50
3、圆角图片
如果,另外一个页面,我需要一个圆角图片 ? 。。。难道只能使用CSS吗?当然不是,请看下面:
发送请求:http://qiniu.imecho.cn/apic15589.png?roundPic/radius/30
4、加水印
如果,我要加一个水印呢:传统方法,得在代码里添加: 添加水印的代码,比如:
addWater('原图路径','水印图路径',$top,$left); //$top 距原图上边的距离,$left 距原图左边的距离
而且水印是固定的,一但生成水印,需要修改水印,需要重修改代码,同时,再次执行代码,那能不能通过请求来来动态生成水印呢?肯定是可以的,如:
请求:http://qiniu.imecho.cn/apic15589.png?watermark/1/image/aHR0cHM6Ly93d3cuYmFpZHUuY29tL2ltZy9iZF9sb2dvMS5wbmc=/dissolve/100/dx/50/dy/200
5、压缩图片
如果图片文件太大,网络传输时间太长,想要压缩:如下:
压缩前
压缩后
还有更多的需求,比如图片旋转,图片调色,图片格式转换等,是否可以通过这种动态生成图片的方式实现呢,而且完全不用修改原代码,直接通过请求参数实现
接下来,分析下PHP如何才能实现以上功能
总体架构
1、 后台上传图片,到文件服务器【不做任务处理】
2、 浏览器发送请求
3、 服务器解析请求,并选择指定的处理接口【压缩、裁剪、圆角、加水印,其它】
4、 根据请求加载原图片,并根据选择的接口生成最终图片
5、 返回给浏览器
实现步骤
1、 环境介绍
基于PHPstudy集成开发环境
域名:
项目目录: E:projectphpimage
开启 rewrite 重定向,优化URL
项目目录结构:
2、图片上传
使用百度的 Web Uploader 上传图片即可,具体实现可以参考官网:
http://fex.baidu.com/webuploader/
图片上传不是本文分析的重点, 文件上传功能已经实现
前端页面:
后端可以使用百度提供的,也可以自己实现。
3、 Rewrite 重定向
下图的案例可以看到,我们访问图片是能过网址加图片名称的方式
它是通过 Apache的重定向实现的,".htaccess" 这个文件就是配置文件,代码如下
RewriteEngine on RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ img.php
4、 入口文件实现
所有的图片访问都是通过 "img.php" 文件来实现的,那么它是如何工作的..
<?php require_once "function.php"; require_once "init.php";
"function.php" 文件
<?php function json($code=0,$msg=''){ $arr = ['code'=>$code, 'msg'=>$msg]; exit(json_encode($arr,JSON_UNESCAPED_UNICODE)); }
"init.php"文件
<?php define('ROOT_PATH', dirname(__FILE__)); //系统根目录 define('DS',DIRECTORY_SEPARATOR); //目录分隔符 define('IMAGE_PATH',ROOT_PATH . DS . 'img' . DS); //图片路径 define('PLUGIN_PATH',ROOT_PATH . DS . 'plugin' .DS); //插件路径 define('IMAGE_CACHE_PATH',ROOT_PATH . DS . 'img_cache' . DS); //处理过的图片缓存路径 include_once PLUGIN_PATH . 'plugin.php'; //加载插件 //get请求参数 $query_string = isset($_SERVER['QUERY_STRING'])?$_SERVER['QUERY_STRING']:''; //图片处理,以插件的形式处理图片,每个插件都是对 $im 进行处理 if($query_string != ''){ include_once "route.php"; }else{ //输出图片,不做任何处理 $plugin = new plugin(); header('Content-type:'.$plugin->mime); //输出类型 echo file_get_contents($plugin->img_file); exit; }
5、 路由的实现
这里的路由很简单,无非就是通过请求?号后面的第一个参数,然后根据参数名引入对应的插件文件,然后实现化插件,代码:
<?php //取得插件名称 $plugin_name = $query_string; if(strpos($query_string,'/') !== false){ $plugin_name = substr($query_string,0,strpos($query_string,'/')); } //加载插件 $plugin_file = PLUGIN_PATH . $plugin_name . '.php'; //插件文件 if(!file_exists($plugin_file)){ json(4,'参数不正确'); }else{ include_once $plugin_file; new $plugin_name($query_string); //实例化插件 }
6、压缩图片
压缩图片是通过 imageslim 这个插件来实现的, 文件名 "plugin/imageslim.php"
代码:
<?php class imageslim extends plugin{ public function __construct(){ parent::__construct(); $create_fun = $this->create_fun; //打开图片函数名 $out_fun = $this->out_fun; //输出图片函数名 $im = $create_fun($this->img_file); //创建图片对象 if(!$im){ json(3,'打开图像失败'); } header('Content-type:'.$this->mime); //输出类型 $out_fun($im,null,50); //输出图片 imagedestroy($im); //销毁图片 } }
可以看到,实现原理很简单, imageslim 继承 plugin 插件,
plugin.php 插件实现一此成员变量的定义,及一些初始化操作
比如,文件名、文件类型、文件大小,代码如下:
<?php class plugin { public $img_name; public $img_file; public $img_mime; public $mime; public $extension; public $create_fun; public $out_fun; public $src_w; //原始图片的宽 public $src_h; //原始图片的高 public function __construct() { //文件检查 $this->img_name = trim($_SERVER['REDIRECT_URL'],'/'); $this->img_file = IMAGE_PATH . $this->img_name; if(!file_exists($this->img_file)){ json(1,'文件不存在'); } //图片类型检查 $this->img_mime = ['image/gif','image/png','image/jpeg','image/bmp','image/webp','image/x-icon','image/tiff']; //图片mime $this->mime = mime_content_type($this->img_file); // 返回 mime 类型 if(!in_array($this->mime,$this->img_mime)){ json(2,'不是一张有效图片'); } $this->extension = pathinfo($this->img_file,PATHINFO_EXTENSION); //获取图片后缀 $mime_end = substr($this->mime,6); $this->create_fun = 'imagecreatefrom'.$mime_end; //打开图片函数名 $this->out_fun = 'image'.$mime_end; //输出图片函数名 //原始图片尺寸 $image_info = getimagesize($this->img_file); $this->src_w = $image_info[0]; $this->src_h = $image_info[1]; } }
只有两个关键函数,
第一个函数: Imgecreatefromjpeg 或 imagcreatefrompng 主要是根据图片的类型是什么来调用对应的打开函数
第二个函数: imagejpeg 或 imagepng 也是根据图片类型来输出对应的函数
7、裁剪图片
这里是才是裁剪图片主要的功能,我们需要根据各种需求进行裁剪,工作中我们都会怎样进行裁剪呢?
第一种: 等比缩放到我们指定的宽,或指定的高
请求接口:http://www.image.com/26.jpg?imageview/0/w/300/h/200
限定缩略图的长边最多为,短边最多为,进行等比缩放,不裁剪。
如果只指定 w 参数则表示限定长边(短边自适应),只指定 h 参数则表示限定短边(长边自适应)
关键函数: imagecopyresized
第二种:等比缩放,居中裁剪
请求接口:http://www.image.com/26.jpg?imageView/1/w/100/h/140
限定缩略图的宽最少为,高最少为,进行等比缩放,居中裁剪。
转后的缩略图通常恰好是 x 的大小(有一个边缩放的时候会因为超出矩形框而被裁剪掉多余部分)。
如果只指定 w 参数或只指定 h 参数,代表限定为长宽相等的正方图
第三种:等比缩放,不裁剪
请求接口http://www.image.com/26.jpg?imageView/2/w/100/h/140
限定缩略图的宽最多为,高最多为,进行等比缩放,不裁剪。如果只指定 w 参数则表示限定宽(长自适应),
只指定 h 参数则表示限定长(宽自适应)。它和模式0类似,区别只是限定宽和高,不是限定长边和短边。
从应用场景来说,模式0适合移动设备上做缩略图,模式2适合PC上做缩略图
第四种:限定宽高最小值,不裁剪
请求接口http://www.image.com/26.jpg?imageView/3/w/100/h/140
限定缩略图的宽最少为,高最少为,进行等比缩放,不裁剪。如果只指定 w 参数或只指定 h 参数,代表长宽限定为同样的值。你可以理解为模式1是模式3的结果再做居中裁剪得到的
总结
以上就是基本的图片裁剪,当然还有一些裁剪模式,我们没有实现 ,比如固定大小,等比缩放,并居中显示,如下
再者还有,添加水印等功能,都属于图片裁剪,由于篇幅有限,其它功能自行研究一一实现
IT技术研习社,专注互联网技术研究与分享,喜欢的朋友可以点击【关注】;把经验传递给有梦想的人;
base64图裁剪 php_世界上最好的编程语言PHP图层裁剪服务搭建详解相关推荐
- python真的超过java了吗-JAVA会被Python超越成为世界上第一大编程语言吗?
关键时刻,第一时间送达! 这个路还还长,暂时不会,未来5年不会,10年有可能,就看现在小学生.初中生学习的怎么样.最近,也在观注这方面的,偶尔看到新闻说python纳入到高考中,想想如果真纳入了,过4 ...
- java多语言编程语言_为什么很多程序员信仰“Java是世界上最好的编程语言”
看到这个标题,估计有不少PHPer要跳进来打我膝盖,跪请各位Java程序员保我周全. 因为PHP是所有web开发中使用最多的语言,也被称为最有生命力的语言,所以也就自然而言有了"PHP是世界 ...
- 世界上最好的编程语言(没有绝对)
转载地址:http://blog.csdn.net/i10630226/article/details/41460383 谈到这个话题,一定会有两种人跳出来. 一种人说,PHP 是世界上最好的编程语 ...
- 世界上最好的编程语言是……
最近,随着 Apache Log4j 2 被曝存在"核弹级"漏洞之后,大家又开始讨论要不要将编程语言进行统一,以及争论哪一个编程语言才是最好的编程语言. *内容来源CSDN文章评论 ...
- PHP编程语言大全,关于“PHP是世界上最好的编程语言”的几个段子
首先我要问PHP真的是世界上最好的编程语言吗?我相信你给不出确切的答案,因为每一种编程语言都有它自己的特点,都能找到自己的领域归宿,这就好比Python常用于写脚本或者爬虫而不是网站前端一样,当然dj ...
- 史上最详细Docker安装最新版Minio 带详解 绝对值得收藏!!! 让我们一起学会使用minio搭建属于自己的文件服务器!!走上白嫖之路!解决启动了但是浏览器访问不了的原因
让我们一起学会使用minio搭建属于自己的文件服务器!!走上白嫖之路! WARNING: Console endpoint is listening on a dynamic port (34451) ...
- linux免安装mysql_linux上免安装版MySQL5.7.18的教程详解
1. 下载mysql 从官网下载mysql的压缩包 mysql-5.7.18-linux-glibc2.5-x86_64.tar.gz 2 把下载的包上传到linux上,先安装下依赖包:Ubun ...
- hurtworld正版社区服务器,《伤害世界hurtworld》正版盗版GM权限获取方法图文详解...
<伤害世界hurtworld>正版盗版GM权限获取方法图文详解 2016-01-10 09:43:03来源:hurtworld吧编辑:评论(0) <伤害世界hurtworld> ...
- 我的世界服务器唱片修改,《我的世界》替换原版音效及唱片文件方法图文详解...
<我的世界>替换原版音效及唱片文件方法图文详解 2014-12-12 18:01:10来源:mcbbs编辑:评论(0) <我的世界>游戏中怎么将原版音效及唱片文件替换成自己想要 ...
最新文章
- Docker-compose 安装Jenkins
- Linux sh是/bin/bash的快捷方式
- 如何在servlet刚启动时候获取服务器根目录?
- 2020国庆节 Angular structual 指令学习笔记(<ng-template>) 包含语法糖解糖过程
- 拿破仑时代的炮兵究竟数学要多好?
- Linux网络编程常见面试题
- tomcat-maven插件热部署(简洁版)
- MVC上传文件受限制
- 随想录(skyeye中的soc仿真)
- Fiddler 快速模拟 mock
- 找不到服务器的打印机,在服务器上找不到打印机无法连接怎么解决
- ai面试的优缺点_找工作时让AI给你面试,你愿意吗?
- 『TensorFlow』TFR数据预处理探究以及框架搭建
- 闪电贷攻击攻击屡试不爽,DeFi一周被盗超1600万美元
- CS224W图机器学习笔记8-图神经网络三大应用
- CentOS下安装man手册
- 支付宝事件溯源:2005年“雅巴“交易再回首
- Retrofit响应数据及异常处理策略
- 域名被封的表现域名微信不能访问该怎样处理
- 中考计算机考试试题2018,2017年中考信息技术试题及答案