Nodejs+express 实现CSDN上传头像功能 (图片的缩放，生成头像缩略图)

Nodejs+express 实现CSDN上传头像功能 (图片的缩放，生成头像缩略图)

转载自：http://blog.csdn.net/kidx_/article/details/9736157

本人在Ubuntu系统下测试通过

GM : GraphicsMagick for node.js 主要使用gm模块。 gm模块可用于图片的裁切、缩放。 要应用gm模块，首先得安装 GraphicsMagick 或者 ImageMagick。

ImageMagick 我安装的是：imagemagick

	$ sudo apt-get install imagemagick

HOW TO USE ImageMagick GM 文档：http://aheckmann.github.io/gm/docs.html 使用ImageMagick

	var imageMagick = gm.subClass({ imageMagick: true });

然后就像文档中使用gm那样使用ImageMagick即可（举个例子）

	imageMagick("img.png").resize(300, 100).autoOrient().write('/path', callback);

示例截图： alt example

点击下载完整示例

示例使用说明： 1、确认系统安装好node.js以及imagemagick 2、解压下载的包 3、执行

    $ cd csdnExample
    $ node app

PS: 由于项目中已安装gm模块，所以不用再安装


11 回复

Nodejs + Express 实现 CSDN 上传头像功能 (图片的缩放，生成头像缩略图)

转载自：http://blog.csdn.net/kidx_/article/details/9736157

环境

  • 操作系统：Ubuntu
  • 工具：GraphicsMagick (GM) for Node.js

安装 GraphicsMagick 或 ImageMagick

为了能够处理图片，你需要先安装 GraphicsMagick 或 ImageMagick。

$ sudo apt-get install graphicsmagick

使用 GM 模块

gm 模块可以用于图片的裁剪、缩放等操作。要使用 gm 模块，需要先安装 GraphicsMagick 或 ImageMagick。

$ npm install gm

示例代码

以下是一个简单的示例，展示如何使用 gm 模块来实现图片的上传、缩放和生成缩略图的功能。

1. 初始化 Express 应用
const express = require('express');
const multer = require('multer');
const gm = require('gm').subClass({ imageMagick: true });

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

app.post('/upload', upload.single('avatar'), (req, res) => {
    const file = req.file;
    const filePath = file.path;

    // 生成缩略图
    gm(filePath)
        .resize(100, 100)
        .write(`public/thumbnails/${file.filename}`, (err) => {
            if (err) return res.status(500).send(err);
            res.send('Upload and thumbnail generation successful!');
        });
});

// 启动服务器
app.listen(3000, () => console.log('Server running on port 3000'));
2. HTML 表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload Avatar</title>
</head>
<body>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="avatar" accept="image/*">
        <button type="submit">Upload</button>
    </form>
</body>
</html>

运行示例

  1. 确认系统已经安装了 Node.js 和 GraphicsMagick。
  2. 解压下载的包。
  3. 执行以下命令：
$ cd csdnExample
$ node app

总结

以上代码展示了如何使用 Node.js 和 Express 结合 gm 模块来实现图片的上传、缩放和生成缩略图的功能。通过这种方式，你可以轻松地将这些功能集成到你的项目中。


不错

帮了大忙，thanks

我觉得还是直接传到七牛比较爽。。。。。

var gm1=require(‘gm’).subClass({ imageMagick : true });; gm1(’/public/images/chat/abc.jpg’) .resize(240, 240) .noProfile() .write(’/public/images/chat/abc1.jpg’, function (err) { if (!err) console.log(‘done’); else { console.log(err); }

    });

系统是window8,报{ [Error: Command failed:

] code: 4, signal: null }的错，各位大神，怎么解决啊？

var gm1=require(‘gm’).subClass({ imageMagick : true });; gm1(’/public/images/chat/abc.jpg’) .resize(240, 240) .noProfile() .write(’/public/images/chat/abc1.jpg’, function (err) { if (!err) console.log(‘done’); else { console.log(err); }

});

系统是window8,报{ [Error: Command failed:

] code: 4, signal: null }的错，各位大神，怎么解决啊？

挺有趣的

看下七牛的文档，很简单 自豪地采用 CNodeJS ionic

源码不能下载了

看看时间又是坟贴，不过还是要收藏一下！！

对于Node.js + Express实现CSDN上传头像功能，并包括图片的缩放和生成缩略图的需求，我们可以使用multer处理文件上传，使用gm（GraphicsMagick for Node.js）或sharp进行图片处理。以下是如何实现这一功能的步骤及示例代码。

安装必要的库

首先，确保你的环境中已经安装了node.js、npm、graphicsmagick或imagemagick。安装multer用于处理文件上传，安装gm或sharp用于图像处理：

npm install express multer gm sharp

若需要，先安装GraphicsMagick或ImageMagick:

sudo apt-get install graphicsmagick # 或者 sudo apt-get install imagemagick

示例代码

这里我们提供一个简单的Express服务器示例，用于接收用户上传的头像并生成缩略图。

const express = require('express');
const multer = require('multer');
const gm = require('gm').subClass({ imageMagick: true }); // 使用gm

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

app.post('/upload-avatar', upload.single('avatar'), (req, res) => {
  const file = req.file;
  if (!file) return res.status(400).send('No files were uploaded.');

  // 生成缩略图
  gm(file.path)
    .resize(100, 100)
    .write(file.path.replace('.', '-thumbnail'), (err) => {
      if (err) throw err;
      console.log('Thumbnail created!');
      res.send('File uploaded and thumbnail generated.');
    });
});

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

上述代码首先定义了一个简单的Express服务器，配置multer来处理文件上传。当接收到上传请求时，会将文件保存到指定目录，然后使用gm来创建一个100x100像素的缩略图，并将其保存为原始文件名后加上-thumbnail作为新的文件名。

运行服务器

启动服务器后，你可以通过发送POST请求到/upload-avatar路由来上传图片，其中表单数据应包含一个名为avatar的文件字段。

这个例子使用了gm，你也可以选择使用sharp，其API设计更加现代且性能更优，具体使用方法类似，只需替换gm相关的部分。

回到顶部