Мотивация :
Всякий раз, когда мы начинаем работать с изображениями, на первое место выходит изменение размера, и часто нам нужно поставить водяной знак. В прошлом посте мы узнали, как настроить базовое изменение размера и оптимизацию изображений с помощью sharp-multer. Здесь мы собираемся добавить расширенное изменение размера и добавление водяного знака ко всем загруженным изображениям.
Предварительные условия:
Пожалуйста, прочитайте часть 1 этой серии здесь.
Установка и настройка:
В последней части мы установили простое приложение NodeJS с этими файлами, содержащими следующий код
Server.js
const express = require("express");
const path = require("path");
const multer = require("multer");
const SharpMulter = require("sharp-multer");
const app = express();
const storage = SharpMulter({
destination: (req, file, callback) => callback(null, "images"),
imageOptions: {
fileFormat: "png",
quality: 80,
resize: { width: 500, height: 500 },
}
});
const upload = multer({ storage });
app.post("/upload", upload.single("avatar"), async (req, res) => {
console.log(req.file);
return res.json("File Uploaded Successfully!");
});
app.get("/", function (req, res) {
res.sendFile(path.join(__dirname, "/index.html"));
});
app.listen(3000, () => {
console.log(`Server is running on port ${3000}`);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload</title>
</head>
<body>
<div class="container">
<h1>File Upload</h1>
<!--Create a form to send the file to a route "upload"-->
<!--Set the request method to POST-->
<!--Set the encytype to "multipart/form-data" in order to send files and not just text-->
<form action="/upload" method="POST" enctype="multipart/form-data">
<div class="file-field input-field">
<div class="btn grey">
<input type="file" name="avatar">
</div>
</div>
<button class="btn" type="submit">Submit</button>
</form>
</div>
</body>
</html>
У нас есть базовое изменение размера и оптимизация, но теперь с sharp-multer 0.2.1 у нас есть несколько дополнительных опций изменения размера, которые мы можем определить, какой режим изменения размера использовать для изображений
ResizeMode
resize.resizeMode
чтобы использовать его, нам нужно указать ключ resizeMode в объекте imageOptions resize ex :
imageOptions: {
fileFormat: "png",
quality: 80,
resize: { width: 500, height: 500, resizeMode: "outside" },
}
Добавление водяного знака
С новым sharp-multer добавить водяной знак довольно просто, достаточно указать путь к входному изображению и место, на которое мы хотим поместить водяной знак.
В настоящее время мы можем разместить водяной знак в таких местах: "center", "top-left", "top-right", "bottom-left", "bottom-right", а также непрозрачность водяного знака может быть определена путем передачи opacity prop в watermarkOptions, поэтому для добавления водяного знака наша конфигурация хранилища будет выглядеть следующим образом
const storage = SharpMulter({
destination: (req, file, callback) => callback(null, "images"),
imageOptions: {
fileFormat: "png",
quality: 80,
resize: { width: 500, height: 500, resizeMode: "outside" },
},
watermarkOptions: {
input: "./images/logo.png", // watermark image location
location: "top-right",
opacity:50 // optional
},
});
Вы можете найти весь код в этом репозитории, попробуйте его и получите удовольствие, будьте здоровы.