‏pica: ریسایز باکیفیت تصویر در مرورگر

pica یه کتابخونه متن‌باز جاوااسکریپته که ریسایز باکیفیت تصویر رو مستقیم توی مرورگر ممکن می‌کنه. به جای اینکه تصویر اورجینال رو به سرور بفرستی و اون‌جا پردازشش کنی، با pica می‌تونی همه‌چیز رو روی کلاینت انجام بدی — هم حجم آپلود کمتر می‌شه، هم سرور بی‌خودی درگیر نمی‌شه.

یکی از نقاط قوت pica اینه که خودش تشخیص می‌ده کدوم تکنولوژی توی مرورگر کاربر در دسترسه و از بهترین گزینه استفاده می‌کنه: WebWorkers، WebAssembly، createImageBitmap، یا در بدترین حالت، پیاده‌سازی خالص JS. نتیجه پیش‌بینی‌پذیر و با کیفیت خوبه، و pixelation (دانه‌دانه شدن تصویر) نداره.

استفاده ازش ساده‌ست. یه instance از resizer می‌سازی و متد resize رو صدا می‌زنی:

import pica from 'pica';
const resizer = pica();

// ریسایز از یه Canvas به Canvas دیگه
resizer.resize(from, to)
  .then(result => resizer.toBlob(result, 'image/jpeg', 0.90))
  .then(blob => console.log('resized to canvas & created blob!'));

فیلتر پیش‌فرض mks2013 هم ریسایز می‌کنه هم یه شارپنینگ بهینه اعمال می‌کنه، بنابراین معمولاً نیازی به تغییرش نیست. اگه بخوای بعد از ریسایز تصویر رو تیزتر کنی، می‌تونی Unsharp Mask داخلی رو با تنظیم unsharpAmount فعال کنی — مقدار ۱۶۰ برای شروع پیشنهاد می‌شه.

در نسخه ۱۰ چند تغییر مهم اتفاق افتاده: export پیش‌فرض دیگه یه کلاس نیست، بلکه یه factory function هست. پارامتر قدیمی quality که عددی بود (مثلاً 3) منسوخ شده و باید از گزینه filter مثل 'lanczos3' استفاده کنی. همچنین برای چند instance هم‌زمان، باید یه instance واحد بسازی و اون رو دوباره‌استفاده کنی.

یه نکته مهم درباره Node.js: pica اصلاً برای مرورگر طراحی شده. اگه توی Node.js هم می‌خوای ازش استفاده کنی، باید یه کتابخونه canvas خارجی رو به عنوان OffscreenCanvas گلوبال معرفی کنی، ولی WebWorker در این حالت کار نمی‌کنه و توصیه می‌شه به جاش از sharp استفاده بشه که سریع‌تر و باکیفیت‌تره.

نکات کلیدی:

• ریسایز باکیفیت مستقیم توی مرورگر، بدون نیاز به سرور
• انتخاب خودکار بهترین تکنولوژی: WebAssembly، WebWorker یا JS خالص
• فیلتر پیش‌فرض mks2013 هم ریسایز می‌کنه هم شارپنینگ اعمال می‌کنه
• نسخه ۱۰ تغییرات breaking داره؛ مخصوصاً در نحوه import و پارامتر quality
• برای پردازش EXIF و orientation در فایل‌های JPEG، کتابخونه image-blob-reduce پیشنهاد می‌شه
• برای Node.js بهتره از sharp استفاده بشه