Nodejs 如何批量获取远程图片并显示出来？

Node.js 如何批量获取远程图片并显示出来？

当你需要批量下载远程图片时，使用 createWriteStream 单个请求是没有问题的。但是，当请求数量增加时，可能会遇到延迟加载的问题。本文将介绍如何使用 Node.js 批量高效地获取远程图片，并将其显示出来。

示例代码

首先，我们需要安装一些必要的依赖库：

npm install request request-promise fs-extra

然后，我们可以编写以下示例代码来批量下载远程图片：

const requestPromise = require('request-promise');
const fs = require('fs-extra');

async function downloadImages(imageUrls, outputDir) {
    try {
        await Promise.all(
            imageUrls.map(async (url, index) => {
                const response = await requestPromise({
                    uri: url,
                    encoding: null // 保持二进制响应
                });

                const filename = `${outputDir}/image_${index}.jpg`;
                await fs.outputFile(filename, response);
                console.log(`Downloaded ${url} to ${filename}`);
            })
        );
        console.log('All images downloaded successfully.');
    } catch (error) {
        console.error('Error downloading images:', error);
    }
}

// 示例URL数组
const imageUrls = [
    'http://example.com/image1.jpg',
    'http://example.com/image2.jpg',
    'http://example.com/image3.jpg'
];

// 指定输出目录
const outputDir = './images';

// 调用函数下载图片
downloadImages(imageUrls, outputDir);

代码解释

1. 引入依赖:

   • request-promise: 提供了 request 的 promise 版本，方便处理异步操作。
   • fs-extra: 提供了更丰富的文件系统操作功能。

2. 定义 downloadImages 函数:

   • 接受一个图片 URL 数组和一个输出目录作为参数。
   • 使用 Promise.all 并行处理所有图片的下载任务。
   • 对于每个 URL，使用 requestPromise 发送 GET 请求，并设置 encoding: null 以保持响应为二进制格式。
   • 将下载的图片保存到指定的输出目录中。

3. 调用 downloadImages 函数:

   • 提供一个示例的图片 URL 数组和输出目录路径。
   • 调用该函数开始下载图片。

通过这种方式，你可以高效地批量下载远程图片，并确保不会因为请求过多而出现延迟加载的问题。

可不可以不用fs，直接显示?

var getHeadImage = function (takeid, cookie) {
  return function (request, response, next) {
    var url = 'mp.weixin.qq.com/cgi-bin/getheadimg?fakeid=' + takeid;
    var output = function (res) {
      var image = '';
      res.setEncoding('binary');
      res.on('data', function (chunk) {
        image += res.statusCode == 200 ? chunk : "";
      });
      res.on('end', function () {
        response.writeHead(200, {
          'Content-type': res.headers['content-type']
        });
        response.write(image, 'binary');
        response.end();
      });
    };
    superagent.get(url).set('Cookie', cookie).end(output);
  }
};