如何在 JavaScript 中將 jpeg 轉換為逐行圖像？

Question

用例：用戶通過瀏覽器上傳圖像，應用程序應將該圖像轉換為漸進式並將其上傳到服務器，以便另一個應用程序可以使用該圖像並漸進式加載圖像。

我嘗試了一些像 'gm' what user imagemagic 這樣的庫，但它們沒有用，所以我想知道是否有某種方法可以做到這一點。

Answer 1

你可以使用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 鏈接。

Answer 2

我有另一個功能示例，當圖像進入存儲桶 S3 時，它是由 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;
  }
};

Answer 3

改用 WebP，雖然沒有設計為漸進式，但可以與惰性加載器一起使用。 這是一種非常出色的壓縮格式（ 1mb jpeg文件最終可能只有300kb ）。

考慮一下：

• 24kb 占位符

• 具有淡入效果的延遲加載 -

• 300kb 網頁

嘗試可用於 webpack 構建的 package webp-loader 。