۱۰ کتابخانه ویرایش تصویر در جاوا اسکریپت | فهرست کاربردی
در این مقاله به معرفی ده کتابخانه ویرایش تصویر در جاوا اسکریپت می‌پردازیم که با استفاده از آن‌ها می‌توانید اقدام به فشرده‌سازی، پردازش و تغییر اندازه تصاویر بکنید و همچنین کارهای زیاد دیگری را روی تصاویر خود اجرا کنید.
کار با تصاویر در جاوا اسکریپت می‌تواند کاری بسیار دشوار و طاقت‌فرسا باشد. خوشبختانه چندین کتابخانه وجود دارند که موجب می‌شوند این کارها بسیار آسان‌تر شود. اگر هر کدام از این کتابخانه‌ها را مفید یافتید، می‌توانید به صورت یک کامپوننت درون فریمورک مورد نظر خود قرار دهید. بدین ترتیب به یک کامپوننت با استفاده مجدد و API اعلانی تبدیل می‌شود که می‌توانید هر زمان از آن استفاده کنید.
امکان انتشار این کامپوننت روی هاب‌هایی مانند Bit.dev نیز وجود دارد. با افزودن مثال و مستندات، کار با این کامپوننت آسان خواهد بود. سپس می‌توانید در هر پروژه‌ای که آن را استفاده می‌کنید، مورد به‌روزرسانی قرار دهید.
Pica
این پلاگین به کاهش اندازه آپلود برای تصاویر بزرگ کم می‌کند و به این ترتیب زمان آپلود را به مقدار زیادی کاهش می‌دهد.
Lena.js
Compressor.js
Fabric.js
کتابخانه Fabric.js امکان ایجاد شکل‌های ساده‌ای مانند مستطیل، دایره، مثلث یا چندضلعی‌های دیگر و اشکال پیچیده‌تر که از مسیرهای زیادی تشکیل یافته‌اند را به سادگی روی عنصر <canvas> در HTML با استفاده از جاوا اسکریپت فراهم می‌سازد. Fabric.js همچنین امکان دستکاری اندازه، موقعیت و چرخش این اشیا را نیز با ماوس فراهم ساخته است.
همچنین امکان تغییر دادن برخی خصوصیت‌های این اشیا مانند رنگ، شفافیت، عمق و موقعیت آن‌ها روی صفحه وب وجود دارد. به این منظور باید گروه این اشیا را با استفاده از کتابخانه Fabric.js انتخاب کنید. کتابخانه Fabric.js امکان تبدیل یک تصویر SVG به داده‌های جاوا اسکریپت را نیز فراهم ساخته است و به این ترتیب می‌توان آن‌ها را روی عنصر <canvas> در HTML قرار داد.
Blurify
Blurify یک کتابخانه کوچک با اندازه‌ای حدود 2 کیلوبایت برای تار ساختن تصاویر است این کتابخانه در سه حالت کار می‌کند:
- Css – در این حالت از مشخصه filter استفاده می‌کند.
- Canvas – در این حالت از canvas برای اکسپورت base64 بهره می‌گیرد.
- Auto – در این حالت ابتدا از css استفاده می‌کند و در غیر این صورت به صورت خودکار به حالت canvas سوئیچ می‌کند.
merge-images
این کتابخانه امکان ترکیب کردن ساده تصاویر را با هم و بدون درگیر شدن با canvas فراهم می‌سازد. گاهی اوقات کار کردن با Canvas سخت می‌شود، به خصوص اگر صرفاً به یک زمینه بوم برای انجام کاری ساده مانند ادغام دو تصویر در هم نیاز داشته باشید، این وضعیت مصداق بیشتری می‌یابد. کتابخانه merge-images همه این کارها را به صورت خودکار انجام می‌دهد و شما کافی است فقط یک فراخوانی ساده تابع انجام دهید.
Cropper.js
CamanJS
MarvinJ
MarvinJ یک فریمورک خالص پردازش تصویر است که از فریمورک Marvin مشتق شده است. MarvinJ ابزاری آسان و قدرتمند برای استفاده در کاربردهای مختلف پردازش تصویر محسوب می‌شود.
Grade
این کتابخانه جاوا اسکریپت گرادیان‌های مکملی را از دو رنگ غالب در تصاویر ارائه شده تولید می‌کند. این ابزار موجب می‌شود که در وب‌سایت مورد نظر یک div را با گرادیان منطبق مشتق شده از یک تصویر پر کنید. این یک پلاگین با کاربرد آسان برای طراحی زیبای بصری وب‌سایت محسوب می‌شود.
کاربرد این پلاگین به مقدار زیادی به سلیقه افراد بستگی دارد، زیرا دریافت خروجی‌های یکسان از این پلاگین به کار بسیار زیادی نیاز دارد.
فایل HTML
اسکریپت جاوا اسکریپت
Doka
این کتابخانه جاوا اسکریپت یک تجربه بی‌نقص ویرایش تصویر به همراه پشتیبانی از ری‌اکت، Vue، Svelte، انگولار، جی کوئری و غیره ارائه می‌کند. آغاز کار با آن بسیار آسان است و یک UI مناسب کار با آن را تسهیل ساخته است. این کتابخانه مجهز به مثال‌های زیادی است که شروع به کار با آن را آسان می‌کند. برای ادغام این پلاگین در اپلیکیشن خود صرفاً به چند گام محدود نیاز دارد.
سخن پایانی
امیدواریم این فهرست کاربردی مورد توجه شما قرار گرفته باشد. دستکاری تصاویر به طور کلی کاری تخصصی و نیازمند کدنویسی زیادی است. اما این کار در جاوا اسکریپت به لطف ابزارها و کتابخانه‌های مختلفی که برخی از آن‌ها را در این نوشته با هم مرور کردیم به کار آسانی تبدیل شده است.
اگر شما نیز کتابخانه دیگری را می‌شناسید که می‌تواند کاربردی باشد، آن را از طریق بخش نظرات با ما و دیگر مخاطبین مجله فرادرس به اشتراک بگذارید.
مطالب مجله فرادرس را در جستجوی گوگل سریع‌تر ببینید
