Nodejs 및 sharp-multer를 사용하여 이미지 크기 조정 및 워터마크 추가

13084 단어 tutorialnodetoolingjavascript

동기 부여 :



이미지 업로드 작업을 시작할 때마다 크기 조정이 시작되고 마지막에 워터마크도 넣어야 하는 경우가 많습니다. sharp-multer을 사용하여 이미지의 기본 크기 조정 및 최적화를 설정하는 방법을 배웠습니다. 여기에서는 업로드된 모든 이미지에 사전 크기 조정 및 워터마크 추가를 추가할 것입니다.

전제 조건:



여기에서 시리즈를 읽으십시오.

설정 및 구성:



마지막 부분에서 다음 코드를 포함하는 파일로 간단한 NodeJS 앱을 설정했습니다.

서버.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 사용할 수 있는 몇 가지 고급 크기 조정 옵션이 있으므로 이제 이미지에 사용할 크기 조정 모드 종류를 정의할 수 있습니다.

크기 조정 모드



resize.resizeMode


  • cover : (기본값) 종횡비를 유지하면서 이미지가 크기에 맞게 자르기/클리핑하여 제공된 두 치수를 모두 포함하는지 확인합니다.
  • contain : 종횡비를 유지하고 필요한 경우 "레터박스"를 사용하여 제공된 두 치수 내에 포함합니다.
  • fill : 입력의 종횡비를 무시하고 제공된 두 치수로 늘립니다. 즉, 제공된 크기와 일치하도록 이미지가 늘어납니다.
  • inside : 종횡비를 유지하면서 크기가 지정된 크기보다 작거나 같은지 확인하면서 이미지 크기를 최대한 크게 조정합니다. 즉 너비는 제공한 최대 값으로 고정되고 높이는 종횡비에 따라 제공된 값보다 낮은 값으로 조정됩니다.
  • outside : 종횡비를 유지하면서 크기가 지정된 두 크기보다 크거나 같은지 확인하면서 가능한 한 작게 이미지 크기를 조정합니다. 즉, 높이는 사용자가 제공한 값으로 고정되고 너비는 종횡비에 따라 제공된 값보다 더 높은 값으로 조정됩니다.

    • 이를 사용하려면 imageOptions resize 객체 ex에 resizeMode 키를 제공해야 합니다.

    
imageOptions: {
    fileFormat: "png",
    quality: 80,
    resize: { width: 500, height: 500, resizeMode: "outside" },
  }


    워터 마크를 추가



    새로운 sharp-multer 추가 워터마크를 사용하면 입력 이미지 경로와 워터마크를 넣을 위치를 제공하기만 하면 됩니다.
    현재 우리는 다음 위치에 워터마크를 넣을 수 있습니다.

    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 
  },
});


    이 코드repo에서 전체 코드를 찾을 수 있습니다. 건배를 사용해 보십시오.
    점점 젖음 와 피닉스
    링크드 리스트 golang과 python

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage