خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

فشرده سازی تصاویر در Node.js با شارپ

ارشیا یوسفی ادیب ۵ آبان, ۱۴۰۲ 4 min read

فشرده سازی تصاویر برای وب سایت یا درون برنامه شما می تواند عملکرد را به شدت بهبود بخشد. شارپ کارهای سنگین را انجام می دهد.

تصاویر بزرگ غیرضروری می‌توانند منجر به زمان پاسخ‌دهی کندتر، مصرف پهنای باند بیش از حد و تجربه‌ای ضعیف برای کاربران، به‌ویژه کاربرانی که اتصالات کندتر دارند، شود. این می تواند منجر به نرخ پرش بالاتر یا تبدیل کمتر شود.

فشرده سازی تصاویر قبل از آپلود می تواند این مشکلات را کاهش دهد و تجربه کاربری بهتری را ارائه دهد. ماژول شارپ این فرآیند را سریع و آسان می کند.

تنظیم محیط توسعه شما

برای نشان دادن فرآیند فشرده سازی تصاویر، با راه اندازی یک سرویس آپلود تصویر با استفاده از multer شروع کنید. شما می توانید با شبیه سازی این مخزن GitHub سرعت فرآیند را افزایش دهید.

پس از شبیه سازی مخزن GitHub، این دستور را اجرا کنید تا وابستگی های سرویس آپلود تصویر را نصب کنید:

npm install

سپس شارپ را با اجرای این دستور نصب کنید:

npm install sharp

ماژول شارپ یک کتابخانه Node.js با کارایی بالا برای پردازش و دستکاری تصاویر است. می‌توانید از Sharp برای تغییر اندازه، برش، چرخش و انجام عملیات‌های مختلف دیگر بر روی تصاویر به طور موثر استفاده کنید. شارپ همچنین پشتیبانی بسیار خوبی برای فشرده سازی تصاویر دارد.

تکنیک های فشرده سازی برای فرمت های مختلف تصویر

فرمت های مختلف تصویر دارای تکنیک های فشرده سازی متمایز هستند. این به این دلیل است که هر کدام کاربردها و الزامات خاصی را برآورده می کنند و عوامل مختلفی از جمله کیفیت، اندازه فایل و ویژگی هایی مانند شفافیت و انیمیشن ها را در اولویت قرار می دهند.

JPG/JPEG

JPEG یک استاندارد فشرده‌سازی تصویر است که توسط Joint Photographic Experts Group برای فشرده‌سازی عکس‌ها و تصاویر واقعی با تن‌های پیوسته و گرادیان‌های رنگی توسعه یافته است. از یک الگوریتم فشرده سازی با اتلاف استفاده می کند و با دور انداختن برخی از داده های تصویر، فایل های کوچکتری تولید می کند.

مطلب مرتبط:   چگونه با استفاده از React یک کلون خبری هکر بسازیم

برای فشرده سازی یک تصویر JPEG با شارپ، ماژول شارپ را وارد کرده و filePath یا بافر تصویر را به عنوان آرگومان ارسال کنید. در مرحله بعد، متد jpeg. را در نمونه شارپ فراخوانی کنید. سپس، یک شی پیکربندی با ویژگی کیفیت که عددی بین 0 تا 100 را به عنوان مقدار می گیرد، ارسال کنید. جایی که 0 کوچکترین فشرده سازی را با کمترین کیفیت و 100 بیشترین فشرده سازی را با بالاترین کیفیت برمی گرداند.

شما می توانید مقدار را بسته به نیاز خود تعیین کنید. برای بهترین نتایج فشرده سازی، مقدار را بین 50-80 نگه دارید تا تعادلی بین اندازه و کیفیت ایجاد شود.

با ذخیره تصویر فشرده شده در سیستم فایل با استفاده از روش .toFile کار را به پایان برسانید. مسیر فایلی را که می خواهید در آن بنویسید به عنوان آرگومان عبور دهید.

مثلا:

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

مقدار پیش فرض کیفیت 80 است.

PNG

PNG (Portable Network Graphics) یک فرمت فایل تصویری است که به دلیل فشرده سازی بدون تلفات و پشتیبانی از پس زمینه شفاف شناخته شده است.

فشرده سازی یک تصویر PNG با شارپ مشابه فشرده سازی یک تصویر JPEG با شارپ است. با این حال، زمانی که تصویر در فرمت PNG است، باید دو تغییر ایجاد کنید.

  1. شارپ تصاویر PNG را با استفاده از روش png. به جای روش jpeg پردازش می کند.
  2. متد .png از compressionLevel استفاده می کند که به جای کیفیت در شیء پیکربندی خود، عددی بین 0 تا 9 است. 0 سریعترین و بزرگترین فشرده سازی ممکن را می دهد، در حالی که 9 کندترین و کوچکترین فشرده سازی ممکن را ارائه می دهد.
مطلب مرتبط:   مروری بر دستورات و پرچم های مهم Go

مثلا:

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

مقدار پیش فرض برای compressionLevel 6 است.

فرمت های دیگر

شارپس از فشرده سازی در فرمت های مختلف تصویر دیگر پشتیبانی می کند که عبارتند از:

  • WebP: فشرده‌سازی تصویر WebP با شارپ همان فرآیند JPG را دنبال می‌کند. تنها تفاوت این است که شما باید متد webp را به جای متد jpeg. در نمونه شارپ فراخوانی کنید.
  • TIFF: فشرده‌سازی تصویر TIFF (فرمت فایل تصویر برچسب) با شارپ همان فرآیند JPG را دنبال می‌کند. تنها تفاوت این است که شما باید متد tiff را به جای متد jpeg. در نمونه شارپ فراخوانی کنید.
  • AVIF: فشرده‌سازی تصویر AVIF (فرمت فایل تصویری AV1) با شارپ همان فرآیند JPG را دنبال می‌کند. تنها تفاوت این است که شما باید متد avif را به جای متد jpeg در نمونه شارپ فراخوانی کنید. مقدار پیش فرض AVIF برای کیفیت 50 است.
  • HEIF: فشرده‌سازی تصویر HEIF (فرمت فایل تصویری با کارایی بالا) با شارپ همان فرآیند JPG را دنبال می‌کند. تنها تفاوت این است که شما باید متد heif را به جای متد jpeg در نمونه شارپ فراخوانی کنید. مقدار پیش فرض AVIF برای کیفیت 50 است.

فشرده سازی تصاویر با شارپ

اگر مخزن GitHub را کلون کرده اید، فایل app.js خود را باز کرده و واردهای زیر را اضافه کنید.

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

exec تابعی است که توسط ماژول child_process ارائه می شود که به شما امکان می دهد دستورات پوسته یا فرآیندهای خارجی را از برنامه Node.js خود اجرا کنید.

می توانید از این تابع برای اجرای دستوری استفاده کنید که اندازه فایل را قبل و بعد از فشرده سازی مقایسه می کند.

سپس، کنترلر POST ‘/single’ را با بلوک کد زیر جایگزین کنید:

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);
  }
});

بلوک کد بالا تکنیک فشرده سازی تصاویر JPEG را پیاده سازی می کند و اندازه های قبل و بعد از استفاده از دستور du را با هم مقایسه می کند.

مطلب مرتبط:   پرس و جوها و جهش های GraphQL: تفاوت چیست؟

دستور du یک ابزار یونیکس است که مخفف “استفاده از دیسک” است. استفاده از فضای فایل را تخمین می زند و استفاده از دیسک را در یک فهرست یا مجموعه ای از دایرکتوری ها تجزیه و تحلیل می کند. هنگامی که فرمان du را با پرچم -h اجرا می کنید، فضای فایل مورد استفاده هر زیر شاخه و محتویات آن را به شکل قابل خواندن توسط انسان نمایش می دهد.

با اجرای این دستور سرویس آپلود خود را راه اندازی کنید:

node app.js

سپس، برنامه خود را با ارسال یک تصویر JPG به مسیر localhost آزمایش کنید:/upload-and-compress با استفاده از برنامه مشتری Postman یا هر ابزار تست API دیگر.

شما باید پاسخی شبیه به این ببینید:

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

سایر کاربردهای ماژول شارپ

علاوه بر فشرده‌سازی تصاویر، ماژول شارپ می‌تواند اندازه، برش، چرخش و چرخش تصاویر را به مشخصات دلخواه تغییر دهد. همچنین از تنظیمات فضای رنگ، عملیات کانال آلفا و تبدیل فرمت پشتیبانی می کند.

Tags: