使用 Node Js 将普通图像转换为渐进图像答案

【问题标题】：Convert Normal Image into Progressive Image using Node Js使用 Node Js 将普通图像转换为渐进图像
【发布时间】：2019-09-11 08:09:29
【问题描述】：

有什么方法可以编写 API 将普通图像转换为使用 Nodejs 进行的渐进式图像。我不想使用 Base64。我在这方面做了很多研发。我发现的一个库，即 lib turbo-jpeg 但是只有他们在解码图像。我也想对该图像进行编码。请检查以下链接以供参考。如果有人有任何解决方案，请告诉我。

链接是 - https://github.com/LinusU/cwasm-jpeg-turbo

请帮我写API来将图像转换为渐进式。

提前谢谢你。

【问题讨论】：

标签： node.js api jpeg libjpeg

【解决方案1】：

您可以使用graphicsmagick 和gm module 将支持的图像格式转换为渐进式JPEG。

这是一个简单的示例（在 macOS 上使用 GraphicsMagick v1.3.31 和 Node.js v10.15.3 进行测试）：

const fs = require('fs');
const path = require('path');
const https = require('https');

const gm = require('gm'); // https://www.npmjs.com/package/gm

const gmIdentify = gmInstance =>
  new Promise((resolve, reject) => {
    gmInstance.identify((err, data) => {
      if (err) {
        reject(err);
        return;
      }
      resolve(data);
    });
  });

const gmStream = (gmInstance, writeStream, format = 'jpg') =>
  new Promise((resolve, reject) => {
    gmInstance
      .stream(format)
      .pipe(writeStream)
      .once('finish', resolve)
      .once('error', reject);
  });

// This function downloads the file from the specified `url` and writes it to
// the passed `writeStream`.
const fetchFile = (url, writeStream) =>
  new Promise((resolve, reject) => {
    https.get(url, res => {
      if (res.statusCode !== 200) {
        reject(new Error('Something went wrong!'));
        return;
      }

      res
        .pipe(writeStream)
        .once('finish', () => {
          resolve();
        })
        .once('error', err => {
          reject(err);
        });
    });
  });

const main = async () => {
  // Download a sample non-progressive JPEG image from the internet
  const originalJpegUrl =
    'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg';
  const originalPath = path.join(__dirname, './original.jpeg');
  await fetchFile(originalJpegUrl, fs.createWriteStream(originalPath));
  originalJpegData = await gmIdentify(gm(fs.createReadStream(originalPath)));
  console.log(
    `Interlace for the original jpeg file is set to ${
      originalJpegData['Interlace']
    }`,
  );

  // Convert the downloaded file to Progressive-JPEG
  const progressiveJpegPath = path.join(__dirname, 'progressive.jpg');
  await gmStream(
    gm(fs.createReadStream(originalPath))
      .interlace('line' /* or 'plane' */) // https://www.imagemagick.org/MagickStudio/Interlace.html
      .quality(originalJpegData['JPEG-Quality']), // save with the same quality as the original file
    fs.createWriteStream(progressiveJpegPath),
  );
  const progressiveJpegData = await gmIdentify(
    gm(fs.createReadStream(progressiveJpegPath)),
  );
  console.log(
    `Interlace for the converted jpeg file is set to ${
      progressiveJpegData['Interlace']
    }`,
  );
};

main();

它下载this非渐进式JPEG图像并将其转换为渐进式JPEG图像并将其保存为progressive.jpg在与脚本相同的目录中。

【讨论】：

如果我们上传png图片那么它也会转换成渐进式吗？
基本上是的。但是您应该将“png”作为第三个参数传递给gmStream，并相应地更改输出文件扩展名。
嘿，当我运行您的代码时，在我的文件夹中添加了 original.jpeg 文件。但是progressive.jpeg文件没有添加到我的项目文件夹中
可能出了点问题。您运行的代码与答案中发布的完全相同吗？
你能发布你的操作系统信息，node.js 版本和 graphicsmagick 版本吗？

【解决方案2】：

如果有人像我一样 c/p @fardjad 的回答并遇到以下错误，对我来说（Ubuntu 16.04）只需更改一行：

(node:14862) UnhandledPromiseRejectionWarning: Error: Could not execute GraphicsMagick/ImageMagick: gm "identify" "-ping" "-verbose" "-" this most likely means the gm/convert binaries can't be found

发件人：

const gm = require('gm'); // https://www.npmjs.com/package/gm

收件人：

const gm = require('gm').subClass({imageMagick: true});

【讨论】：