Node.js 對圖片進行裁切、縮放

protossrr發表於2017-02-14
Node.js

GraphicsMagick for node.js

首先得安裝 GraphicsMagick 或者 ImageMagick。

然後執行：

[plain] view plain copy
  1. $ sudo npm install gm  


我安裝的是ImageMagick，在ubuntu系統下快速安裝：

[plain] view plain copy
  1. $ sudo apt-get install imagemagick  


HOW TO USE

GM 文件：http://aheckmann.github.io/gm/docs.html

使用ImageMagick

[javascript] view plain copy
  1. var imageMagick = gm.subClass({ imageMagick: true });  
然後就像文件中使用gm那樣使用ImageMagick即可（舉個例子）
[javascript] view plain copy
  1. imageMagick("img.png").resize(300, 100).autoOrient().write('/path', callback);  


Example (nodejs + Express)

[javascript] view plain copy
  1. var gm = require('gm')  
  2. ,   fs = require('fs')  
  3. ,   imageMagick = gm.subClass({ imageMagick : true });  
  4.   
  5. exports.imgUpload = function(req, res) {  
  6.     res.header('Content-Type', 'text/plain');  
  7.     var path = req.files.img.path;  //獲取使用者上傳過來的檔案的當前路徑  
  8.     var sz = req.files.img.size;  
  9.     if (sz > 2*1024*1024) {  
  10.         fs.unlink(path, function() {    //fs.unlink 刪除使用者上傳的檔案  
  11.             res.end('1');  
  12.         });  
  13.     } else if (req.files.img.type.split('/')[0] != 'image') {  
  14.         fs.unlink(path, function() {  
  15.             res.end('2');  
  16.         });  
  17.     } else {  
  18.         imageMagick(path)  
  19.         .resize(150, 150, '!') //加('!')強行把圖片縮放成對應尺寸150*150！  
  20.         .autoOrient()  
  21.         .write('public/images/user/'+req.files.img.name, function(err){  
  22.             if (err) {  
  23.                 console.log(err);  
  24.                 res.end();  
  25.             }  
  26.             fs.unlink(path, function() {  
  27.                 return res.end('3');  
  28.             });  
  29.         });  
  30.     }  
  31. };  


上面只是index.js檔案的部分核心程式碼

點選去下載完整Example


示例執行截圖：



可以檢視 public/images/user/ 裡面的圖片，驗證你上傳的圖片是否被縮放了。


同理可對圖片進行裁切：

[javascript] view plain copy
  1. gm("img.png").crop(width, height, x, y)  

詳情看gm的文件http://aheckmann.github.io/gm/docs.html

相關文章