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

Summarize this content to 400 words in Persian Lang
ما یک سرویس جدید دیگر را در 25 جولای منتشر کردیم، بنابراین این بار در مورد آن صحبت خواهم کرد.اتفاقا من حدود 22 شروع به توسعه کردم، بنابراین در حدود 3 روز آن را ساختم.

درباره سرویسی که ایجاد کردم

“ImgRoller” سایتی است که تصاویر را فشرده و اندازه آن را تغییر می دهد.

https://yosidev.com/tools/imgroller/en/

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

🆓قابل استفاده رایگان و بدون محدودیت در تعداد برگه هایی که می توانید همزمان فشرده کنید
🍎عملکرد فشرده سازی قوی
📜نه تنها فشرده سازی، بلکه تغییر اندازه. همچنین مقایسه بصری کیفیت تصویر را فراهم می کند
📌تنظیمات خروجی در URL منعکس می شود، بنابراین می توانید آن را نشانه گذاری کنید و دفعه بعد از همان تنظیمات استفاده کنید
✨خروجی از Webp و همچنین PNG و Jpeg پشتیبانی می کند
👀کاهش حجم فایل در یک نگاه
💕نیازی به نگرانی نیست زیرا هیچ فایلی روی سرور آپلود نمی شود
📗پشتیبانی از 8 زبان از جمله ژاپنی و انگلیسی

نکته ها

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

اساساً ما از Compressor.js استفاده می کنیم، اما PNG را نیز فشرده می کنیم که compressorjs در آن خوب نیست.

اگر یک تصویر PNG مناسب را در سایت نمونه Compressor.js وارد کنید، می بینید که اندازه آن تغییر نمی کند.

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

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

Dropzone در React

ImgRoller دارای Doropzone است که به شما امکان می دهد فایل ها را بکشید و رها کنید تا فایل ها را انتخاب کنید. و من فکر می کنم معروف ترین راه برای ایجاد آن در React استفاده از بسته react-dropzone است.

من خودم از کاربران مکرر این پکیج بودم اما وقتی بعد از مدت ها به Github رفتم متوجه شدم که تقریبا دو سال از آخرین commit گذشته است. از آنجایی که نمی‌توانستم گزینه‌های خوب دیگری پیدا کنم، بین استفاده از react-dropzone یا ایجاد خودم درگیر بودم و در نهایت تصمیم گرفتم خودم را ایجاد کنم.

من آن را به صورت بسته ای با نام react-dropzone-vv منتشر می کنم.من همچنین یک سایت مستندسازی ایجاد کرده ام. من تمام تلاشم را می کنم تا آن را به روز کنم، پس لطفا از آن استفاده کنید.

https://github.com/yosipy/react-dropzone-vv

https://www.npmjs.com/package/react-dropzone-vv#react-dropzone-vv

تحت تأثیر react-dropzone است، اما من کد را تغییر ندادم بلکه آن را از ابتدا بازسازی کردم.بررسی نوع mime و پسوند فایل ها به طرز شگفت آوری مشکل ساز بود.

سرانجام.

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

https://yosidev.com/tools/imgroller/en/