Node.js | Загрузка, обработка и изменение размера изображений с помощью пакета Sharp

Опубликовано: 1 Августа, 2021

Часто в наших веб-приложениях нам необходимо хранить несколько форм и форматов изображений в виде изображения профиля или изображения продукта в прототипе электронной коммерции. В большинстве наших случаев нам нужно хранить изображения, сжатые до нескольких размеров, с сохранением качества. Например, для продукта на сайте электронной коммерции нам потребуется сохранить 3 версии изображения продукта:

Эскиз
Низкое разрешение для превью и т. Д.
Оригинальное высокое разрешение для реального продукта.

Предпосылки:

Основы Node.js
Обработка маршрутов в express.js

Используемые модули: Sharp, Multer

Согласно официальной документации 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 в качестве промежуточного программного обеспечения для передачи. Чтобы настроить 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, используя следующую команду:
```
 узел app.js
```
После выполнения вышеуказанной команды вы увидите следующий вывод:
```
 Сервер запущен!
```
Отправьте запрос POST на https: // localhost: 3000 / upload с помощью Postman. Вам нужно передать «аватар» как КЛЮЧ, а картинку как ЗНАЧЕНИЕ.
После нажатия на запрос будет создан каталог изображений с нашим желаемым изображением.

Обработка изображения с помощью Sharp: мы будем обрабатывать изображения с помощью пакета 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!" )
 })

После запуска сервера и отправки того же запроса, что и раньше, вы получите все загруженные изображения в каталог изображений с желаемой конфигурацией, как показано ниже:

Дополнительные параметры резкости: https://sharp.pixelplumbing.com/

Node.js

Node.js | Загрузка, обработка и изменение размера изображений с помощью пакета Sharp

РЕКОМЕНДУЕМЫЕ СТАТЬИ