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

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

目前创新互联已为成百上千的企业提供了网站建设、域名、网站空间、网站托管、服务器托管、企业网站设计、新化网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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

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

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

这里说明一下：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介绍。图片处理的实现如下：

 
 
 
    
  
  
  
  1. app.get('/resize',function(req,res){
    2. 
  
  
  
  2.   var src = req.query.src,
    3. 
  
  
  
  3.     width = req.query.w,
    4. 
  
  
  
  4.     height = req.query.h,
    5. 
  
  
  
  5.     type = req.query.type;
    6. 
  
  
  
  6.   var imgFile = uploadDir+src+'.'+type;
    7. 
  
  
  
  7.   var notFound = '不好意思，该图片不存在或已被删除!';
    8. 
  
  
  
  8.   var thumb = getThumbImg(src,width,height,type);
    9. 
  
  
  
  9.   if(isFileExists(imgFile)){
    10. 
  
  
  
  10.     if(isFileExists(thumb)){
    11. 
  
  
  
  11.       res.type(type).sendFile(__dirname+'/'+thumb);
    12. 
  
  
  
  12.     }else{
    13. 
  
  
  
  13.       imgResize(imgFile,thumb,width,height,type,res);
    14. 
  
  
  
  14.     }
    15. 
  
  
  
  15.   }else{
    16. 
  
  
  
  16.     res.status(404).send(notFound);
    17. 
  
  
  
  17.   }
    18. 
  
  
  
  18. });
    19. 
  
  
  
  19. function imgResize(f,th,w,h,t,r){
    20. 
  
  
  
  20.   var imgSize = sizeOf(f);
    21. 
  
  
  
  21.   if(!w||!h||w>=imgSize.width||h>=imgSize.height){
    22. 
  
  
  
  22.     r.type(t).sendFile(__dirname+'/'+f);
    23. 
  
  
  
  23.   }else{
    24. 
  
  
  
  24.     imageMagick(f)
    25. 
  
  
  
  25.       .resize(w,h,'!') 
    26. 
  
  
  
  26.       .stream(function(err, stdout, stderr) {
    27. 
  
  
  
  27.         if (err) {
    28. 
  
  
  
  28.           console.log(err);
    29. 
  
  
  
  29.           res.end();
    30. 
  
  
  
  30.         }
    31. 
  
  
  
  31.         var ws = fs.createWriteStream(th);
    32. 
  
  
  
  32.         stdout.pipe(ws);
    33. 
  
  
  
  33.         r.type(t);
    34. 
  
  
  
  34.         stdout.pipe(r);
    35. 
  
  
  
  35.       });
    36. 
  
  
  
  36.   }
    37. 
  
  
  
  37. }
    38. 
  
  
  
  38. function isFileExists(filePath){
    39. 
  
  
  
  39.   var bool = !0;
    40. 
  
  
  
  40.   try{
    41. 
  
  
  
  41.     fs.accessSync(filePath,fs.constants.F_OK);
    42. 
  
  
  
  42.   }catch(err){
    43. 
  
  
  
  43.     bool = !1;
    44. 
  
  
  
  44.   }
    45. 
  
  
  
  45.   return bool;
    46. 
  
  
  
  46. } 
    47.

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

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

2、Apache+PHP实现 首先得搭建windows下php开发环境，我本人用的是apache2+php5.6，具体的搭建步骤网上一大堆，便不再累述。开启apache rewrite功能 首先我们得开启Apache rewrite模块功能，去掉配置文件http.conf中LoadModule rewritemodule modules/modrewrite.so前面的注释，然后设置Directory块下AllowOverride All，可能有多处，接着重启Apache服务。 配置.htaccess文件 在DocumentRoot目录下，新建.htaccess文件，如果创建不了，可以先创建一个文本，然后另存为，在弹出的对话框文件名处填写".htaccess"即可。之后，编写URL重写规则，如下所示：

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

将类似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版逻辑一致，代码如下：

 
 
 
    
  
  
  
  1. function getThumbImg($src,$w,$h,$type)
    2. 
  
  
  
  2. {
    3. 
  
  
  
  3.   global $thumbs;
    4. 
  
  
  
  4.   return $_SERVER['DOCUMENT_ROOT'].$thumbs.$src.'_'.$w.'_'.$h.'.'.$type;
    5. 
  
  
  
  5. }
    6. 
  
  
  
  6. function imgResize($f,$th,$w,$h,$t)
    7. 
  
  
  
  7. {
    8. 
  
  
  
  8.   $imagick = new Imagick();
    9. 
  
  
  
  9.   $imagick->readImage($_SERVER['DOCUMENT_ROOT'].'\\'.$f);
    10. 
  
  
  
  10.   $width = $imagick->getImageWidth();
    11. 
  
  
  
  11.   $height = $imagick->getImageHeight();
    12. 
  
  
  
  12.   if(!$w||!$h||$w>=$width||$h>=$height){
    13. 
  
  
  
  13.     header('Content-Type:image/'.$t);
    14. 
  
  
  
  14.     echo file_get_contents($_SERVER['DOCUMENT_ROOT'].'\\'.$f);
    15. 
  
  
  
  15.   }else{
    16. 
  
  
  
  16.     $imagick->stripImage();
    17. 
  
  
  
  17.     $imagick->cropThumbnailImage($w, $h);
    18. 
  
  
  
  18.     $imagick->writeImage($th);
    19. 
  
  
  
  19.     header('Content-Type:image/'.$t);
    20. 
  
  
  
  20.     echo $imagick->getImageBlob();
    21. 
  
  
  
  21.     $imagick->clear();
    22. 
  
  
  
  22.     $imagick->destroy();
    23. 
  
  
  
  23.   }
    24. 
  
  
  
  24. }
    25. 
  
  
  
  25. $uploadDir = "uploads/images/";
    26. 
  
  
  
  26. $thumbs = "uploads/thumbs/";
    27. 
  
  
  
  27. $src = $_GET['src'];
    28. 
  
  
  
  28. $width = $_GET['w'];
    29. 
  
  
  
  29. $height = $_GET['h'];
    30. 
  
  
  
  30. $type = $_GET['type'];
    31. 
  
  
  
  31. $imgFile = $uploadDir.$src.'.'.$type;
    32. 
  
  
  
  32. $notFound = '不好意思，该图片不存在或已被删除!';
    33. 
  
  
  
  33. $thumb = getThumbImg($src,$width,$height,$type);
    34. 
  
  
  
  34. if(file_exists($imgFile)){
    35. 
  
  
  
  35.   if(file_exists($thumb)){
    36. 
  
  
  
  36.     header('Content-Type:image/'.$type);
    37. 
  
  
  
  37.     echo file_get_contents($thumb);
    38. 
  
  
  
  38.   }else{
    39. 
  
  
  
  39.     imgResize($imgFile,$thumb,$width,$height,$type);
    40. 
  
  
  
  40.   }
    41. 
  
  
  
  41. }else{
    42. 
  
  
  
  42.   header("HTTP/1.0 404 Not Found");
    43. 
  
  
  
  43.   header("status: 404");
    44. 
  
  
  
  44.   echo $notFound;
    45. 
  
  
  
  45. } 
    46.

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

网页题目：nodejs和php实现图片访问实时处理
链接URL：http://www.csdahua.cn/qtweb/news13/506613.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

小程序开发知识

分类信息网

小谭网创广告　　 　网站推广　　 　重庆小程序开发公司　　 　SSL证书　　 　公司宣传册设计　　 　九针服饰　　 　成都全网营销推广　　 　租用服务器　　 　自适应网站　　 　服务器机柜租用　　 　大邑珉田数据中心　　 　营销型网站建设　　 　重庆APP开发　　 　微信小程序　　 　高端网站设计　　 　成都封阳台　　 　微信小程序开发　　 　成都微信公众号开发　　 　app软件开发公司　　 　温江网站建设