Nén hình ảnh trong Node.js bằng Sharp

Leonard Strauss included in Programming Web Development Javascript File Compression Image Hosting

2023-10-26 1649 words 8 minutes

Contents

Hình ảnh lớn không cần thiết có thể dẫn đến thời gian phản hồi chậm hơn, tiêu tốn quá nhiều băng thông và mang lại trải nghiệm chậm chạp cho người dùng, đặc biệt là những người dùng có kết nối chậm hơn. Điều này có thể dẫn đến tỷ lệ thoát cao hơn hoặc ít chuyển đổi hơn.

Trước khi truyền các tệp phương tiện kỹ thuật số, việc nén các thành phần hình ảnh của chúng có thể giúp giảm bớt các biến chứng tiềm ẩn và cung cấp giao diện người dùng được cải thiện. Về vấn đề này, mô-đun Sharp trình bày một giải pháp đơn giản và thiết thực để đạt được mục tiêu này.

Thiết lập môi trường phát triển của bạn

Để minh họa quy trình giảm kích thước nội dung trực quan, hãy bắt đầu bằng cách triển khai chức năng tải tệp lên bằng Multer. Người ta có thể đẩy nhanh quá trình bằng cách sao chép mã từ kho lưu trữ GitHub này.

Để thiết lập thành công dịch vụ tải lên hình ảnh từ kho lưu trữ GitHub nhân bản, hãy thực hiện lệnh sau để cài đặt mọi phụ thuộc cần thiết:

 npm install

Tiếp theo, cài đặt Sharp bằng cách chạy lệnh này:

 npm install sharp

Mô-đun Sharp là thư viện Node.js hiệu suất cao để xử lý và thao tác với hình ảnh. Bạn có thể sử dụng Sharp để thay đổi kích thước, cắt, xoay và thực hiện nhiều thao tác khác trên hình ảnh một cách hiệu quả. Sharp còn hỗ trợ nén hình ảnh rất tốt.

Kỹ thuật nén cho các định dạng hình ảnh khác nhau

Các định dạng hình ảnh khác nhau sử dụng các chiến lược nén độc đáo vì chúng được điều chỉnh để giải quyết các trường hợp sử dụng cụ thể và những cân nhắc như chất lượng, kích thước tệp và các thuộc tính như độ trong suốt và khả năng hoạt ảnh.

JPG/JPEG

JPEG, hay tiêu chuẩn nén hình ảnh của Nhóm chuyên gia chụp ảnh chung, được thiết kế đặc biệt để nén ảnh và các hình ảnh khác có sự chuyển màu và tông màu liên tục. Bằng cách sử dụng một hình thức nén mất dữ liệu độc đáo, nó giảm kích thước tệp một cách hiệu quả bằng cách loại bỏ có chọn lọc các khía cạnh nhất định của dữ liệu hình ảnh gốc.

đầu tiên, nhập mô-đun Sharp; thứ hai, cung cấp đường dẫn đến tệp hình ảnh hoặc bộ đệm chứa nội dung của nó; thứ ba, sử dụng phương thức .jpeg từ phiên bản Sharp đã nhập; cuối cùng, bao gồm một đối tượng cấu hình có thuộc tính chất lượng được đặt thành giá trị số nằm trong khoảng từ 0 đến 100, trong đó giá trị thấp hơn biểu thị các tệp nhỏ hơn nhưng chất lượng hình ảnh kém hơn trong khi giá trị cao hơn tạo ra các tệp lớn hơn với độ rõ nét cao hơn.

Người ta có thể điều chỉnh tham số theo yêu cầu cụ thể của họ. Để đạt được hiệu suất nén tối ưu, nên duy trì giá trị trong khoảng 50-80, nhờ đó đạt được sự cân bằng phù hợp giữa kích thước tệp và độ trung thực của hình ảnh.

Kết thúc bằng cách lưu trữ biểu diễn nén trong hệ thống tệp bằng cách sử dụng phương thức .toFile , chuyển đường dẫn của tệp đầu ra mong muốn làm tham số.

Ví dụ:

 await sharp(req.file.path)
        .jpeg({ quality: 60 })
        .toFile(`./images/compressed-${req.file.filename}`)
        .then(() => {
          console.log(`Compressed ${req.file.filename} successfully`);
        });

Cài đặt tiêu chuẩn cho chất lượng hình ảnh được đặt ở mức 80 theo mặc định.

PNG

PNG, hay Đồ họa mạng di động, là định dạng tệp hình ảnh được công nhận rộng rãi, nổi tiếng với khả năng nén dữ liệu không mất dữ liệu đồng thời hỗ trợ độ trong suốt của hình ảnh, khiến nó rất linh hoạt và lý tưởng cho nhiều ứng dụng khác nhau.

Khi cố gắng nén hình ảnh được lưu ở định dạng Đồ họa Mạng Di động (PNG) bằng Sharp, điều quan trọng cần lưu ý là quy trình này có một số điểm tương đồng với việc nén một hình ảnh tương đương được lưu dưới dạng tệp Nhóm Chuyên gia Chụp ảnh Chung (JPEG). Tuy nhiên, có hai điều chỉnh đặc biệt phải được thực hiện trong quá trình này.

Việc sử dụng định dạng tệp PNG, trái ngược với JPEG, là cách Sharp xử lý việc xử lý hình ảnh.

Định dạng PNG sử dụng một cách tiếp cận mới để nén bằng cách sử dụng tham số “compressionLevel”, thay vì cài đặt “chất lượng” truyền thống, như một phương tiện kiểm soát mức độ nén đạt được. Ở cài đặt thấp nhất (0), thuật toán tạo ra khả năng giảm kích thước tệp nhanh nhất và rộng nhất, trong khi ở cài đặt cao nhất (9), thuật toán mang lại khả năng nén chậm nhất và ít đáng kể nhất.

Ví dụ:

 await sharp(req.file.path)
        .png({
          compressionLevel: 5,
        })
        .toFile(`./images/compressed-${req.file.filename}`)
        .then(() => {
          console.log(`Compressed ${req.file.filename} successfully`);
        });

Theo mặc định, giá trị được gán cho mức nén được đặt ở mức 6.

Các định dạng khác

Sharps cũng cung cấp hỗ trợ nén hình ảnh ở nhiều định dạng tệp bổ sung, bao gồm:

Việc sử dụng thuật toán nén hình ảnh WebP kết hợp với Sharp tuân theo quy trình tương tự như sử dụng JPEG, với điểm khác biệt duy nhất là yêu cầu gọi phương thức webp từ phiên bản Sharp thay vì phương thức .jpeg .

Định dạng tệp hình ảnh được gắn thẻ (TIFF) được sử dụng để nén hình ảnh trong quá trình triển khai của Sharp tuân theo quy trình tương tự như quy trình được sử dụng bởi JPEG, mặc dù có một lệnh gọi phương thức thay thế. Thay vì gọi phương thức “.jpeg” trên phiên bản Sharp, thay vào đó, người ta phải gọi phương thức “tiff”.

Định dạng AVID, liên quan đến Định dạng tệp hình ảnh AV1 được sử dụng trong quá trình nén hình ảnh của Sharp, hoạt động tương tự như JPEG. Tuy nhiên, thay vì sử dụng phương thức.jpeg trên phiên bản Sharp, người ta phải sử dụng phương thức avif. Ngoài ra, cần lưu ý rằng giá trị mặc định cho cài đặt chất lượng ở định dạng AVIF được đặt ở 50.

HEIF, viết tắt của Định dạng tệp hình ảnh hiệu quả cao, sử dụng quy trình tương tự về mặt nén khi so sánh với JPEG. Tuy nhiên, nó yêu cầu sử dụng phương thức heif thay vì phương thức .jpeg trên phiên bản Sharp. Ngoài ra, theo mặc định, AVIF có cài đặt chất lượng hình ảnh là 50.

##Nén Hình Ảnh Sắc Nét

Nếu ai đó đã sao chép kho lưu trữ GitHub, thì cần phải truy cập vào tệp “app.js” trong dự án và kết hợp các câu lệnh nhập nói trên vào đó.

 const sharp = require("sharp");
const { exec } = require("child_process");

Hàm exec, được cung cấp thông qua mô-đun child\_process, cho phép thực thi các lệnh shell hoặc các quy trình bên ngoài trong ứng dụng Node.js.

Chức năng này cho phép bạn thực thi lệnh so sánh kích thước của tệp trước và sau khi nén.

Tiếp theo, chúng tôi sẽ thay thế trình xử lý POST'/single' hiện tại bằng cách kết hợp đoạn mã được cung cấp trong đó.

 app.post("/upload-and-compress", upload.single("image"), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(404).send("Please upload a valid image");
    }

    const compressedFileName = req.file.filename.split(".")[0];
    const compressedImageFilePath = `./images/${compressedFileName}-compressed.png`;

    await sharp(req.file.path)
      .jpeg({ quality: 50 })
      .toFile(compressedImageFilePath)
      .then(() => {
        let sizeBeforeCompression, sizeAfterCompression;
        const sizeBeforeCompressionCommand = `du -h ${req.file.path}`;
        const sizeAfterCompressionCommand = `du -h ${compressedImageFilePath}`;

        exec(sizeBeforeCompressionCommand, (err, stdout, stderr) => {
          sizeBeforeCompression = stdout.split("\\t")[0];

          exec(sizeAfterCompressionCommand, (err, stdout, stderr) => {
            sizeAfterCompression = stdout.split("\\t")[0];

            res.send({
              message: "Image uploaded and compressed successfully",
              sizeBeforeCompression,
              sizeAfterCompression,
            });
          });
        });
      });
  } catch (error) {
    console.log(error);
  }
});

Việc triển khai mã nói trên bao gồm một phương pháp nén các tệp hình ảnh JPEG, đồng thời tiến hành so sánh kích thước tệp tương ứng của chúng trước và sau khi sử dụng lệnh du.

Lệnh du là một tiện ích Unix cung cấp thông tin về việc sử dụng đĩa bằng cách ước tính lượng không gian bị chiếm bởi các tệp và thư mục trong các thư mục được chỉ định. Bằng cách sử dụng cờ -h , đầu ra có thể được hiển thị ở định dạng mà con người dễ hiểu, cho biết không gian tệp được sử dụng bởi các thư mục con riêng lẻ và nội dung tương ứng của chúng.

Để bắt đầu hoạt động của dịch vụ truyền tệp của bạn, hãy thực hiện hướng dẫn sau:

 node app.js

Để xác thực chức năng của ứng dụng, bạn có thể sử dụng ứng dụng khách Postman hoặc bất kỳ công cụ kiểm tra API thay thế nào mà bạn chọn để gửi hình ảnh JPEG đến điểm cuối được chỉ định “” để xử lý và nén thêm.

Dự kiến bạn sẽ nhận được thư trả lời giống như định dạng sau:

 {
  "message": "Image uploaded and compressed successfully",
  "sizeBeforeCompression": "13M",
  "sizeAfterCompression": "3.1M"
}

Các ứng dụng khác của Sharp Module

Mô-đun Sharp cung cấp nhiều khả năng xử lý hình ảnh toàn diện ngoài khả năng nén đơn thuần. Chúng bao gồm thay đổi kích thước, cắt xén, xoay và lật hình ảnh theo kích thước được chỉ định. Hơn nữa, nó cho phép sửa đổi không gian màu, vận hành kênh alpha và chuyển đổi giữa các định dạng tệp khác nhau.