nodejs和php实现图片访问实时处理


Posted in NodeJs onJanuary 05, 2017

我在访问时光网、网易云音乐等网站时,发现将它们页面中的一些图片URL修改一下就可以得到不同尺寸的图片,于是思考了其实现方案,我的思路是:URL Rewrite + 实时处理 + 缓存,对用户请求的URL进行重写,然后利用图片处理类库对图片进行处理,接着缓存该尺寸图片并输出到浏览器。使用PHP和Node.js实现了一遍,基本达到了需要的效果。

1、Nginx+Node.js(express)实现

URL重写

这里Nginx主要是做一个URL重写和反向代理的功能,配置如下所示:

location ~ /upload/{
  if ($request_uri ~* ^/upload/(.+)_(\d+)x(\d+)\.(jpg|png|gif)$) {
    set $src $1;
    set $w $2;
    set $h $3;
    set $t $4;
    rewrite . /resize?src=$src&w=$w&h=$h&type=$t break;
  }
  proxy_pass    http://127.0.0.1:3000;
}

这里说明一下:Nginx监听本地的80端口,Node.js监听的是3000端口。当用户访问类似http://127.0.0.1/upload/147332819224704_400x300.jpg的地址时,便会被代理到http://127.0.0.1:3000/resize?src=147332819224704&w=400&h=300&type=jpg访问,看起来像是访问一张图片,其实不然。

图片实时处理

我们在Node.js中实时处理图片,进行缩放、模糊、水印等操作,之后将其缓存起来并输出到浏览器。Node.js自身API并不擅长图片的处理,我们可以借助第三方类库来实现,这里推荐GraphicsMagick或ImageMagick,使用它们之前先安装gm模块:

npm install gm --save
接着便可以使用GraphicsMagick了,该模块的API可以参考GM模块API介绍。图片处理的实现如下:

app.get('/resize',function(req,res){
  var src = req.query.src,
    width = req.query.w,
    height = req.query.h,
    type = req.query.type;
  var imgFile = uploadDir+src+'.'+type;
  var notFound = '不好意思,该图片不存在或已被删除!';
  var thumb = getThumbImg(src,width,height,type);
  if(isFileExists(imgFile)){
    if(isFileExists(thumb)){
      res.type(type).sendFile(__dirname+'/'+thumb);
    }else{
      imgResize(imgFile,thumb,width,height,type,res);
    }
  }else{
    res.status(404).send(notFound);
  }
});
function imgResize(f,th,w,h,t,r){
  var imgSize = sizeOf(f);
  if(!w||!h||w>=imgSize.width||h>=imgSize.height){
    r.type(t).sendFile(__dirname+'/'+f);
  }else{
    imageMagick(f)
      .resize(w,h,'!') 
      .stream(function(err, stdout, stderr) {
        if (err) {
          console.log(err);
          res.end();
        }
        var ws = fs.createWriteStream(th);
        stdout.pipe(ws);
        r.type(t);
        stdout.pipe(r);
      });
  }
}
function isFileExists(filePath){
  var bool = !0;
  try{
    fs.accessSync(filePath,fs.constants.F_OK);
  }catch(err){
    bool = !1;
  }
  return bool;
}

如上代码所示,当用户访问http://127.0.0.1/upload/147332819224704_400x300.jpg时,如果147332819224704这张图片存在,且400x300这个尺寸也存在,则直接输出这张图片,如不存在,则生成一张该尺寸的图片保存并输出到浏览器。如果提供的尺寸超出了图片的原始尺寸,则直接输出原图。我们不仅可以修改尺寸,也可以进行模糊、打水印等操作,这里就不多介绍了。

如果不用Nginx反向代理也是可以的,使用express的正则路由实现,如下所示:

app.get(/^\/upload\/(.+)_(\d+)x(\d+)\.(jpg|png|gif)$/,function(req,res){
  var src = RegExp.$1,
    width = RegExp.$2,
    height = RegExp.$3,
    type = RegExp.$4;
  var imgFile = uploadDir+src+'.'+type;
  var notFound = '不好意思,该图片不存在或已被删除!';
  var thumb = getThumbImg(src,width,height,type);
  if(isFileExists(imgFile)){
    if(isFileExists(thumb)){
      res.type(type).sendFile(__dirname+'/'+thumb);
    }else{
      imgResize(imgFile,thumb,width,height,type,res);
    }
  }else{
    res.status(404).send(notFound);
  }
});

2、Apache+PHP实现

首先得搭建windows下php开发环境,我本人用的是apache2+php5.6,具体的搭建步骤网上一大堆,便不再累述。

开启apache rewrite功能

首先我们得开启Apache rewrite模块功能,去掉配置文件http.conf中LoadModule rewrite_module modules/mod_rewrite.so前面的注释,然后设置Directory块下AllowOverride All,可能有多处,接着重启Apache服务。

配置.htaccess文件

在DocumentRoot目录下,新建.htaccess文件,如果创建不了,可以先创建一个文本,然后另存为,在弹出的对话框文件名处填写".htaccess"即可。之后,编写URL重写规则,如下所示:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^upload/(.+)_([0-9]+)x([0-9]+)\.(jpg|png|gif)$ resize.php?src=$1&w=$2&h=$3&type=$4 [L]

将类似http://127.0.0.1/upload/147332819224704_400x300.jpg地址重写为http://127.0.0.1/resize.php/src=147332819224704&w=400&h=300&type=jpg

功能实现

接下来便是功能的实现,逻辑和nodejs版逻辑一致,代码如下:

function getThumbImg($src,$w,$h,$type)
{
  global $thumbs;
  return $_SERVER['DOCUMENT_ROOT'].$thumbs.$src.'_'.$w.'_'.$h.'.'.$type;
}
function imgResize($f,$th,$w,$h,$t)
{
  $imagick = new Imagick();
  $imagick->readImage($_SERVER['DOCUMENT_ROOT'].'\\'.$f);
  $width = $imagick->getImageWidth();
  $height = $imagick->getImageHeight();
  if(!$w||!$h||$w>=$width||$h>=$height){
    header('Content-Type:image/'.$t);
    echo file_get_contents($_SERVER['DOCUMENT_ROOT'].'\\'.$f);
  }else{
    $imagick->stripImage();
    $imagick->cropThumbnailImage($w, $h);
    $imagick->writeImage($th);
    header('Content-Type:image/'.$t);
    echo $imagick->getImageBlob();
    $imagick->clear();
    $imagick->destroy();
  }
}

$uploadDir = "uploads/images/";
$thumbs = "uploads/thumbs/";
$src = $_GET['src'];
$width = $_GET['w'];
$height = $_GET['h'];
$type = $_GET['type'];
$imgFile = $uploadDir.$src.'.'.$type;
$notFound = '不好意思,该图片不存在或已被删除!';
$thumb = getThumbImg($src,$width,$height,$type);
if(file_exists($imgFile)){
  if(file_exists($thumb)){
    header('Content-Type:image/'.$type);
    echo file_get_contents($thumb);
  }else{
    imgResize($imgFile,$thumb,$width,$height,$type);
  }
}else{
  header("HTTP/1.0 404 Not Found");
  header("status: 404");
  echo $notFound;
}

至此,图片访问实时处理也就完成了。其实大部分图片服务器都需要这样的功能,而不是事先生成好几套尺寸的图片。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
Aug 03 NodeJs
nodeJs爬虫获取数据简单实现代码
Mar 29 NodeJs
nodejs基础知识
Feb 03 NodeJs
nodejs个人博客开发第四步 数据模型
Apr 12 NodeJs
nodejs动态创建二维码的方法
Aug 12 NodeJs
nodejs创建简易web服务器与文件读写的实例
Sep 07 NodeJs
nodejs使用redis作为缓存介质实现的封装缓存类示例
Feb 07 NodeJs
nodejs前端模板引擎swig入门详解
May 15 NodeJs
nodejs的路径问题的解决
Jun 30 NodeJs
nodejs初始化init的示例代码
Oct 10 NodeJs
Nodejs中怎么实现函数的串行执行
Mar 02 NodeJs
Nodejs libuv运行原理详解
Aug 21 NodeJs
nodejs实例解析(输出hello world)
Jan 03 #NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 #NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 #NodeJs
浅谈Nodejs中的作用域问题
Dec 26 #NodeJs
nodeJS删除文件方法示例
Dec 25 #NodeJs
详解nodejs 文本操作模块-fs模块(五)
Dec 23 #NodeJs
详解Nodejs的timers模块
Dec 22 #NodeJs
You might like
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
2007/05/30 Javascript
javascript中最常用的继承模式 组合继承
2010/08/12 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
浅探express路由和中间件的实现
2019/09/30 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python内建数据结构详解
2016/02/03 Python
浅谈五大Python Web框架
2017/03/20 Python
对pandas处理json数据的方法详解
2019/02/08 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python getopt模块使用实例解析
2019/12/18 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
煤矿班组长岗位职责
2013/12/29 职场文书
巡警年度自我鉴定
2014/02/21 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
Python中glob库实现文件名的匹配
2021/06/18 Python
React如何创建组件
2021/06/27 Javascript