推行 热搜:

nodejs和php完成图片拜访及时处置

   日期:2017-11-21     阅读:85    批评:0    
中心提示:我在拜访光阴网、网易云音乐等网站时,发明将它们页面中的一些图片URL修正一下就可以失掉差别尺寸的图片,于是考虑了实在现方案
我在拜访光阴网、网易云音乐等网站时,发明将它们页面中的一些图片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="/skin/default/image/lazy.gif" class="lazy" original="/skin/default/image/nopic.gif" 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="/skin/default/image/lazy.gif" class="lazy" original="/skin/default/image/nopic.gif" 图片及时处置 我们在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 rewritemodule modules/modrewrite.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="/skin/default/image/lazy.gif" class="lazy" original="/skin/default/image/nopic.gif" [L]  
将相似http://127.0.0.1/upload/147332819224704_400x300.jpg地点重写为http://127.0.0.1/resize.php/src="/skin/default/image/lazy.gif" class="lazy" original="/skin/default/image/nopic.gif" 功用完成 接上去即是功用的完成,逻辑和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; 
}  
至此,图片拜访及时处置也就完成了。实在大局部图片效劳器都需求如许的功用,而不是事前天生好几套尺寸的图片。
 
打赏
 
更多>同类资讯
0相干批评

引荐图文
引荐资讯
点击排行
网站首页  |  关于我们  |  联络方法  |  运用协议  |  版权隐私  |  网站舆图  |  排名推行  |  告白效劳  |  网站留言  |  RSS订阅  |  违规告发  |  鄂ICP备14001892号-2