روش فشرده سازی تصاویر در Node.js با شارپ Sharp برای بهینه سازی حجم آن

فشرده سازی تصاویر برای وب یا در برنامه ها می تواند عملکرد را تا حد زیادی بهبود بخشد. شارپ به شما کمک می کند تا تصاویر را در Node.js به راحتی فشرده کنید. تصاویر بزرگ غیرضروری می توانند زمان پاسخگویی را کاهش دهند، پهنای باند را تلف کنند و تجربه کاربری ضعیفی ایجاد کنند، به خصوص برای کسانی که برنامه های شبکه محدودی دارند. این کار منجر به نرخ پرش یا انتقال صفحه کمتر در وب می شود. فشرده سازی تصاویر قبل از آپلود می تواند این مشکلات را به حداقل برساند و تجربه کاربری بهتری را ارائه دهد. ماژول شارپ این فرآیند را سریع و آسان می کند. در این مطلب از سلام دنیا، ما به نحوه فشرده سازی تصاویر در Node.js با استفاده از Sharp پرداخته ایم. با ما همراه باشید.

فشرده سازی تصاویر در Node.js از طریق تنظیم محیط توسعه

برای نشان دادن فرآیند فشرده سازی تصویر، با راه اندازی یک سرویس آپلود تصویر با استفاده از multer شروع کنید. شما می توانید با شبیه سازی قالب مورد نظر از مخزن GitHub سرعت این فرآیند را افزایش دهید. پس از شبیه سازی مخزن GitHub، دستور npm install را اجرا کنید تا وابستگی های تصویر سرویس آپلود تصویر را نصب کنید. سپس شارپ را با اجرای دستور npm install sharp نصب کنید. ماژول شارپ یک کتابخانه Node.js با کارایی بالا برای پردازش و دستکاری تصویر است. می‌توانید از شارپ برای تغییر اندازه، برش، چرخش و انجام سایر عملیات روی عکس‌ها استفاده کنید. شارپ همچنین از فشرده سازی تصویر پشتیبانی بسیار خوبی دارد.

حتما بخوانید: آموزش کاهش و کم کردن حجم عکس در ویندوز

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

• JPG/JPEG: فرمت JPEG یک استاندارد فشرده‌سازی تصویر است که توسط Joint Photographic Experts Group برای فشرده‌سازی عکس‌های واقع‌گرایانه با استفاده از تن‌های پیشرونده و گرادیان‌های رنگی توسعه یافته است. از اصطلاح فشرده سازی با اتلاف استفاده می کند و با حذف برخی از داده های تصویر، فایل های کوچکتری ایجاد می کند. برای فشرده سازی تصاویر 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 یک فرمت فایل تصویری برای فشرده سازی بدون تلفات و پشتیبانی از پس زمینه شفاف است. فشرده سازی یک تصویر PNG با شارپ مشابه فشرده سازی یک تصویر JPEG با شارپ است. با این حال، زمانی که عکس با فرمت PNG است، باید دو تغییر ایجاد کنید. شارپ تصاویر PNG را با استفاده از روش .png به جای jpeg. پردازش می کند . متد .png از compressionLevel استفاده می کند که عددی بین 0 تا 9 است که جایگزین کیفیت در شیء پیکربندی می شود. 0 سریعترین و بزرگترین مقدار فشرده سازی ممکن را می دهد و 9 کندترین و کوچکترین مقدار فشرده سازی را نشان می دهد.

برای مثال:

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، TIFF، AVIF، HEIF پشتیبانی می کند.

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

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

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

اکسل تابعی است که توسط ماژول child_process ارائه شده است که به شما امکان می دهد دستورات پوسته یا یک فرآیند خارجی را از یک برنامه Node.js اجرا کنید. می توانید از این تابع برای اجرای دستوری برای مقایسه اندازه فایل قبل و بعد از فشرده سازی استفاده کنید. سپس، POST handler ' /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 مقایسه می کند . دستور du یک ابزار یونیکس است که مخفف عبارت "استفاده از دیسک" است. فضای فایل را تخمین می زند و استفاده از دیسک را در یک پوشه یا گروهی از پوشه ها تجزیه و تحلیل می کند. هنگامی که فرمان du را با پرچم -h اجرا می کنید ، اندازه فایلی را که هر زیرشاخه استفاده می کند همراه با محتوا به شکل قابل خواندن توسط انسان نشان می دهد. با اجرای دستور node app.js سرویس آپلود را شروع کنید. سپس، برنامه را با ارسال تصویر JPG به لوکال هاست آزمایش کنید: مسیر /upload-and-compress با استفاده از سرویس گیرنده برنامه Postman یا هر ابزار تست API دیگر.  پاسخی مشابه زیرخواهید دید.

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

سخن آخر

در این پست ما به نحوه فشرده سازی تصاویر در Node.js با استفاده از Sharp پرداختیم. امیدواریم این روش ها به شما کمک کرده باشد. در صورت مفید بودن مقاله، لطفاً آن را با دوستان خود به اشتراک بگذارید.

مطالب مرتبط:

روش تغییر سایز عکس در آیفون و مک

دانلود 6 برنامه تبدیل فرمت عکسNEF به JPG رایگان برای اندروید