Nodejs 上传图片如何压缩图片的宽与高呢？

Nodejs 上传图片如何压缩图片的宽与高呢？

我想在上传图片的时候，压缩一下图片的高于宽，顺便可以压缩一下大小。网站的图片是需要压缩图片的宽与高的比如头像等等。。。如果直接css设置div宽高感觉不是很好。

4 回复

我想在上传图片的时候，压缩一下图片的高于宽，顺便可以压缩一下大小。网站的图片是需要压缩图片的宽与高的比如头像等等。。。如果直接css设置div宽高感觉不是很好。


gm https://github.com/aheckmann/gm 我自己二次封装了一下 gm https://github.com/skipify/webimg

当然可以！在 Node.js 中处理上传图片并进行压缩是一个常见的需求。我们可以使用 multer 来处理文件上传，并使用 sharp 库来压缩图片。下面是一份详细的示例代码，包括前端和后端的部分。

后端（Node.js）

首先，安装必要的依赖：

npm install multer sharp

然后创建一个简单的服务器来处理上传和压缩图片：

const express = require('express');
const multer = require('multer');
const sharp = require('sharp');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('image'), async (req, res) => {
    try {
        const { file } = req;
        if (!file) {
            return res.status(400).send('No image uploaded.');
        }

        // 压缩图片
        await sharp(file.path)
            .resize(200, 200)  // 设置新的宽度和高度
            .toFile(path.join('compressed', path.basename(file.path)));

        res.send('Image uploaded and compressed successfully.');
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端（HTML + JavaScript）

创建一个简单的 HTML 表单来上传图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Image</title>
</head>
<body>
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="image" id="imageInput" accept="image/*">
        <button type="submit">Upload</button>
    </form>

    <script>
        document.getElementById('uploadForm').addEventListener('submit', async (event) => {
            event.preventDefault();

            const formData = new FormData();
            formData.append('image', document.getElementById('imageInput').files[0]);

            const response = await fetch('/upload', {
                method: 'POST',
                body: formData
            });

            const result = await response.text();
            alert(result);
        });
    </script>
</body>
</html>

解释

  1. 后端：

    • 使用 multer 处理文件上传，并将文件保存到 uploads/ 目录。
    • 使用 sharp 库读取上传的图片，并将其压缩为指定的宽度和高度（例如 200x200）。
    • 将压缩后的图片保存到 compressed/ 目录。

  2. 前端：

    • 创建一个简单的 HTML 表单用于选择和上传图片。
    • 使用 fetch 发送 POST 请求到 /upload 端点，将文件作为表单数据发送。

这样，当用户上传图片时，服务器会自动对其进行压缩并保存。

要在Node.js中实现上传图片时自动压缩图片的宽度和高度，你可以使用multer来处理文件上传，并用sharp库来压缩图片。

首先，你需要安装必要的依赖包：

npm install multer sharp

接下来，你需要配置Multer来处理文件上传，然后用Sharp来处理图片压缩。

这里是一个简单的例子：

  1. 安装依赖：

    npm install multer sharp

  2. 创建上传中间件： 创建一个名为upload.js的文件来处理文件上传。

    const multer = require('multer');
const path = require('path');

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname)); // 使用时间戳防止重名
  }
});

const upload = multer({ storage: storage });
module.exports = upload;

  3. 压缩图片： 创建一个名为compressImage.js的文件来处理图片压缩。

    const sharp = require('sharp');

async function compressImage(inputPath, outputPath, width, height) {
  await sharp(inputPath)
    .resize(width, height)
    .toFile(outputPath);
}

module.exports = compressImage;

  4. 处理上传和压缩： 在你的主文件（例如server.js）中处理上传和压缩逻辑。

    const express = require('express');
const upload = require('./upload');
const compressImage = require('./compressImage');

const app = express();
const port = 3000;

app.post('/upload', upload.single('avatar'), async (req, res) => {
  try {
    const inputPath = req.file.path;
    const outputPath = `uploads/compressed-${Date.now()}${path.extname(req.file.originalname)}`;
    await compressImage(inputPath, outputPath, 200, 200); // 压缩为200x200像素
    res.send(`Compressed image saved at ${outputPath}`);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

这段代码展示了如何使用multer来接收上传的图片，并用sharp库来压缩图片的尺寸。你可以根据实际需求调整图片的宽度和高度参数。

回到顶部