如何在 JavaScript 中将 jpeg 转换为渐进式图像？答案

【问题标题】：How to convert jpeg to progressive image in JavaScript?如何在 JavaScript 中将 jpeg 转换为渐进式图像？
【发布时间】：2021-04-24 04:23:52
【问题描述】：

用例：用户通过浏览器上传图片，应用应将该图片转换为渐进式并将其上传到服务器，以便其他应用可以使用该图像并渐进式加载图像。

我尝试了一些库，例如 'gm' what user imagemagic，但它们不起作用，所以我想知道是否有某种方法可以做到这一点。

【问题讨论】：

我假设您尝试过the code in this answer。什么不适合你？
你对这个应用程序是什么意思？您是否希望在浏览器或后端完成转换负载？如果您正在寻找浏览器转换，我认为compressorjs 是一个不错的选择。
如果您打算在浏览器中压缩图像，这可能是一个不错的解决方案。 npmjs.com/package/compressorjs, npmjs.com/package/browser-image-compression

标签： javascript node.js image-processing image-conversion

【解决方案1】：

改用 WebP，虽然没有设计为渐进式，但可以与惰性加载器结合使用。这是一种非常出色的压缩格式（1mb jpeg 文件最终可能只是 300kb）。

考虑一下：

24kb 占位符

具有淡入效果的延迟加载 -

300kb 网页

试试可以在 webpack 构建中使用的包 webp-loader。

【讨论】：

【解决方案2】：

我有另一个功能示例，当图像进入存储桶 S3 时，它由 lambda（Node JS）触发，该 lambda（节点 JS）也使用 lib sharp 优化图像大小，然后将新图像发布到另一个文件夹中s3。这是一个例子：

"use strict";

const AWS = require("aws-sdk");
const sharp = require("sharp");
const { basename, extname } = require("path");

const S3 = new AWS.S3();

module.exports.handle = async ({ Records: records }) => {
  try {
    await Promise.all(
      records.map(async (record) => {
        const { key } = record.s3.object;

        const image = await S3.getObject({ Bucket: process.env.bucket, Key: key }).promise();

        // blob
        const optimized = await sharp(image.Body)
          .resize(1280, 720, {
            fit: "inside",
            withoutEnlargement: true,
          })
          .toFormat("jpeg", {
            progressive: true,
            quality: 50,
          })
          .toBuffer();

        await S3.putObject({
          Body: optimized,
          Bucket: process.env.bucket,
          ContentType: "image/jpeg",
          Key: `compressed/${basename(key, extname(key))}.jpg`,
        }).promise();
      })
    );

    return {
      statusCode: 301,
      body: { ok: true },
    };
  } catch (error) {
    return error;
  }
};

【讨论】：

【解决方案3】：

您可以使用sharp 模块，它有很多功能并且非常好。如果您只想转换为渐进式 jpeg，那么

const sharp = require("sharp")

const main = async () => {
  try {
    const data = await sharp('10.jpg')
      .jpeg({
        quality: 100, // adjust the quality
        progressive: true
      })
      .toBuffer();
    await sharp(data).toFile('output.jpg')
  } catch(error) {
    console.log(error)
  }
}

main()

Repl link 获取代码。

【讨论】：