21xrx.com
2024-12-22 16:25:53 Sunday
登录
文章检索 我的文章 写文章
Nodejs读取图片操作简介
2023-07-01 10:11:33 深夜i     --     --
Nodejs 图片读取 操作简介 文件处理 图片显示

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境,它使 JavaScript 可以脱离浏览器环境运行在服务器上,由于其高效的处理能力和丰富的模块库,Node.js 在Web应用开发方面得到广泛应用。

当我们在开发 Web 应用时,经常需要对图片进行读取和操作,Node.js 提供了丰富的模块库和方法来方便我们读取和操作图片。在本文中,我们将介绍使用 Node.js 读取图片的操作方法。

首先,我们需要安装一个图片处理模块 sharp,它是一个快速的,高质量的,N-API 互操作的图像处理库,它可以在文件系统或网络流中进行读取和写入,支持 JPEG,PNG,WebP 和 TIFF 等多种图片格式。

下面是使用 sharp 模块读取图片的示范代码:


const sharp = require('sharp');

sharp('input.jpg')

 .resize(200, 200)

 .toFile('output.jpg', (err, info) => {

  console.log(info);

 });

上面的代码中,我们首先导入 sharp 模块,然后使用 sharp 方法读取名为 input.jpg 的图片,调整其尺寸为 200x200(resize 方法),然后将调整后的图片写入名为 output.jpg 的文件中(toFile 方法)。

除了使用 toFile 方法将图片写入文件中,sharp 模块也可以将调整后的图片输出到内存流或网络流中,使其成为服务器发送给客户端的响应。

如下所示是使用 sharp 模块读取图片,将其编码为 base64 字符串,然后将其作为响应发送给客户端的代码:


const sharp = require('sharp');

const fs = require('fs');

const http = require('http');

const server = http.createServer((req, res) => {

 fs.readFile('input.jpg', (err, data) => {

  if (err) {

   console.error(err);

   res.writeHead(500, { 'Content-Type': 'text/plain' });

   res.end('Server Error');

   return;

  }

  sharp(data)

   .resize(200, 200)

   .toBuffer((err, buffer) => {

    if (err) {

     console.error(err);

     res.writeHead(500, { 'Content-Type': 'text/plain' });

     res.end('Server Error');

     return;

    }

    const base64Image = Buffer.from(buffer).toString('base64');

    res.setHeader('Content-Type', 'text/html');

    res.setHeader('Content-Length', Buffer.byteLength(base64Image));

    res.end(`<img src="data:image/jpeg;base64,${base64Image}">`);

   });

 });

});

server.listen(3000, () => console.log('Server is listening on port 3000'));

上面的代码中,我们使用 Node.js 原生的 http 模块创建了一个 HTTP 服务器,然后读取名为 input.jpg 的图片,使用 sharp 模块对其进行调整尺寸操作,并将调整后的图片编码为 base64 字符串,最后将其作为响应发送给客户端。客户端会通过 data URL 将 base64 字符串显示为一张图片。

总结来说,Node.js 的 sharp 模块提供了丰富的方法来读取和操作图片,具有高效和灵活的处理效果,可以方便地与其他模块集成使用,为 Web 应用开发和设计提供了一定的便利和帮助。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复