Node.js 使用Sharp包进行图像上传，处理和调整大小

2021年3月14日14:35:44 发表评论 1,392 次浏览

通常, 在我们的Web应用程序中, 我们需要以个人资料图片或电子商务原型中产品图片的形式存储图像的多种形式和格式。在大多数情况下, 我们需要存储压缩成多种尺寸的图像, 以保持质量。例如, 对于电子商务站点上的产品, 我们将需要存储产品图像的3个版本：

缩图
预览等的分辨率较低
实际产品的原始高分辨率。

先决条件：

Node.js基础
express.js中的路由处理

使用的模块：尖锐, 穆特尔

根据npm的官方文档, sharp的典型用例是将常见格式的大图像转换为尺寸较小, 对网络友好的JPEG, PNG和WebP图像。

在空目录中初始化npm, 以以下命令开头：

npm init -y

使用以下命令安装所需的模块：

npm install express --save
npm install body-parser --save
npm install sharp --save
npm install multer --save

混合机设置：

要上传文件, 我们需要将multer配置为要传递的中间件。要设置multer, 我们需要将以下代码添加到我们的应用程序中。

注意：有关更多用法, 以及更多关于上载和共享的信息, 请参阅官方文档, 网址为穆特尔

// Importing the module
const multer = require( 'multer' );  
  
// Setting up a middleware specifying the
// destination for storing the images
const upload = multer({dest : './images' })

由于multer可处理表单数据, 因此你需要确保上传是通过配置为multipart / form-data的表单进行的。

文件名：app.js

// Importing the required modules
var express = require( 'express' );
var bodyparser = require( 'body-parser' );
var fs = require( 'fs' );
var multer = require( 'multer' );
var sharp = require( 'sharp' );
  
var upload = multer({dest : './images' }) 
  
// Initialize the express object
var app = express();     
  
// Use body-parser to parse incoming data
app.use(bodyparser.urlencoded({extended : true }))     
  
// Use the upload middleware containing 
// our file configuration, with the name
// of input file attribute as "avatar"
// to the desired configuration.
  
app.post( '/upload' , upload.single( "avatar" ), (req, res)=>
{
     fs.rename(req.file.path, './images/avatar.jpg' , (err)=>{
         console.log(err);
     })
  
     return res.json( "File Uploaded Successfully!" );
});
  
app.listen(3000, ()=>{
     console.log( "Server Running!" )
})

运行上述代码的步骤：

使用以下命令运行app.js文件：

node app.js

执行完上述命令后, 你将看到以下输出：

Server Running!

发送POST请求至

https：// localhost：3000 / upload

使用邮递员。你需要将"头像"作为KEY传递, 将图片作为VALUE传递。

点击请求后, 将使用我们所需的图像创建图像目录。

使用Sharp处理图像：我们将通过锋利的包装来处理图像。要创建具有不同属性的多个实例, 我们使用以下代码：

// Configuring thumbnail image
sharp(__dirname + '/images/avatar.jpg' ).resize(200, 200)
.jpeg({quality : 50}).toFile(__dirname 
         + '/images/avatar_thumb.jpg' );
  
// Configuring Preview Image
sharp(__dirname + '/images/avatar.jpg' ).resize(640, 480)
.jpeg({quality : 80}).toFile(__dirname 
         + '/images/avatar_preview.jpg' );

一切都准备好了

app.js

将如下所示：

文件名：app.js

var express = require( 'express' );
var bodyparser = require( 'body-parser' );
var fs = require( 'fs' );
var multer = require( 'multer' );
var sharp = require( 'sharp' );
  
var upload = multer({dest : './images' }) 
  
var app = express();   
  
app.use(bodyparser.urlencoded({extended : true }))  
  
app.post( '/upload' , upload.single( "avatar" ), (req, res)=>
{
     fs.rename(req.file.path, './images/avatar.jpg' , (err)=>{
         console.log(err);
     })
  
     sharp(__dirname + '/images/avatar.jpg' ).resize(200, 200)
     .jpeg({quality : 50}).toFile(__dirname 
         + '/images/avatar_thumb.jpg' );
  
  
     sharp(__dirname + '/images/avatar.jpg' ).resize(640, 480)
     .jpeg({quality : 80}).toFile(__dirname 
         + '/images/avatar_preview.jpg' );
  
     return res.json( "File Uploaded Successfully!" );
});
  
app.listen(3000, ()=>{
     console.log( "Server Running!" )
})

运行服务器并发送与以前相同的请求后, 你将使用所需的配置将所有上载的图像保存在图像目录中, 如下所示：