通常, 在我们的Web应用程序中, 我们需要以个人资料图片或电子商务原型中产品图片的形式存储图像的多种形式和格式。在大多数情况下, 我们需要存储压缩成多种尺寸的图像, 以保持质量。例如, 对于电子商务站点上的产品, 我们将需要存储产品图像的3个版本:
- 缩图
- 预览等的分辨率较低
- 实际产品的原始高分辨率。
- Node.js基础
- express.js中的路由处理
根据npm的官方文档, sharp的典型用例是将常见格式的大图像转换为尺寸较小, 对网络友好的JPEG, PNG和WebP图像。
在空目录中初始化npm, 以以下命令开头:
npm init -y
使用以下命令安装所需的模块:
npm install express --savenpm install body-parser --savenpm install sharp --savenpm 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' );
【Node.js 使用Sharp包进行图像上传,处理和调整大小】一切都准备好了
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!" )
})
运行服务器并发送与以前相同的请求后, 你将使用所需的配置将所有上载的图像保存在图像目录中, 如下所示:
文章图片
额外的夏普选项: https://sharp.pixelplumbing.com/
推荐阅读
- 电子邮件的优缺点简要介绍
- Django简介和安装详细指南
- 微信转账限额超限怎样办?微信转账限额超限处理办法_微信
- 2017微信转账限额多少?2017微信转账限额_微信
- 微信表情包怎样调整顺序?微信自定义表情包顺序的调整办法_微信
- 玩dnf的死肥宅是啥梗?800万死肥宅来报到表情包_其它聊天
- 微信发送原图而不是缩略图怎样设置?微信发送原图设置办法_微信
- 微信转账限额5000是怎样回事?微信转账限额介绍_微信
- 中国银行微信转账限额是多少?中国银行微信转账限额_微信