یک دهه پیش، ویرایش یک تصویر روی یک وبسایت یعنی آپلود آن، انتظار برای اینکه یک سرور کار را انجام دهد و دانلود نتیجه. امروز یک مرورگر میتواند یک عکس ۳۰ مگابایتی را فشرده کند، یک PNG را به WebP تبدیل کند یا یک دسته تصویر را بدون تماس با هیچ سروری تغییر اندازه بدهد. دو فناوری آن تغییر را ممکن کردند: Canvas و WebAssembly. هیچکدام وقتی ببینید هرکدام چه میکند مرموز نیستند.
Canvas: یک سطح رسم با دسترسی در سطح پیکسل
هر مرورگر امروزی با رابط Canvas عرضه میشود — یک مستطیل خالی که میتوانید با JavaScript رویش رسم کنید. قدرت واقعیاش برای ابزارهای تصویر رسم شکلها نیست؛ این است که Canvas به کد دسترسی مستقیم به تکپیکسلهای یک تصویر میدهد.
وقتی یک عکس را در یک بوم بارگذاری میکنید، مرورگر یک آرایه از اعداد به کد شما میدهد: مقادیر قرمز، سبز، آبی و آلفا (شفافیت) برای هر پیکسل. از آنجا، عملیات معمولی سرراست میشوند:
- تغییر اندازه یعنی نمونهبرداری از آن شبکه پیکسل به یک شبکه کوچکتر یا بزرگتر.
- برش یعنی کپی یک ناحیه مستطیلی به یک بوم جدید.
- چرخش و برگرداندن تبدیلهای هندسیاند که پیش از رسم اعمال میشوند.
- تبدیل فرمت وقتی بوم را خروجی میگیرید اتفاق میافتد — یک JPEG، یک PNG یا یک WebP بخواهید و مرورگر پیکسلها را متناسب کدگذاری میکند.
همه اینها روی دستگاه خودتان، با استفاده از پردازندهتان و در جایی که در دسترس باشد، کارت گرافیکتان اجرا میشود. چیزی آپلود نمیشود، چون پیکسلها هرگز صفحه را ترک نمیکنند. به همین دلیل تبدیلکننده تصویر میتواند لحظهای که یک PNG را میاندازید آن را به WebP دربیاورد — هیچ رفتوبرگشتی برای انتظار نیست.
WebAssembly: سرعت نزدیک به بومی درون مرورگر
Canvas تبدیلهای رایج را از پس برمیآید، اما بعضی کارها به عضله محاسباتی جدی نیاز دارند — کدگذاری باکیفیت JPEG، بهینهسازی PNG، اجرای یک مدل هوش مصنوعی برای بریدن یک پسزمینه. JavaScript بهتنهایی میتواند برای اینها خیلی کند باشد. اینجاست که WebAssembly (اغلب کوتاهشده به Wasm) وارد میشود.
WebAssembly یک فرمت فشرده و سطحپایین است که مرورگرها میتوانند نزدیک به سرعت بومی اجرایش کنند. توسعهدهندگان کد سریع و آزمودهشدهای را که به زبانهایی مثل C، C++ یا Rust نوشته شده — همان کتابخانههایی که نرمافزار تصویر دسکتاپ را نیرو میدهند — میگیرند و به Wasm کامپایل میکنند. مرورگر بعد آن کد را در یک محیط فشرده و ایمنسازیشده اجرا میکند، خیلی سریعتر از JavaScript معادل.
در عمل این یعنی یک زبانه مرورگر حالا میتواند کاری را انجام دهد که قبلاً به یک سرور یا یک اپلیکیشن دسکتاپ نیاز داشت: کدگذاری تصاویر با فشردهسازی حرفهای، جدا کردن فراداده یا اجرای یک شبکه عصبی برای حذف پسزمینه — همه بهصورت محلی.
چرا پردازش محلی هم خصوصی و هم سریع است
Canvas و WebAssembly را کنار هم بگذارید و فایدهها بهطور طبیعی بیرون میآیند.
حریم خصوصی ساختاری است، نه یک وعده. چون پیکسلها در صفحه میمانند و پردازش روی پردازنده شما اجرا میشود، هیچ مرحله آپلودی نیست. هیچ کپی سروری از فایل شما برای ذخیره، ثبت، کش یا آموزش روی آن نیست — چون فایل هرگز منتقل نشد. لازم نیست به یک سیاست حریم خصوصی اعتماد کنید؛ میتوانید با روشن کردن حالت هواپیما و تماشای اینکه ابزار به کارش ادامه میدهد تأییدش کنید.
سرعت از حذف کامل شبکه میآید. کندترین گام یک ابزار سروری معمولاً بالا و پایین کردن فایل شماست. آن را حذف کنید و یک عکس ۴۰ مگابایتی تقریباً بهسرعت یک عکس ۴۰ کیلوبایتی پردازش میشود. صفی هم نیست — دستگاه شما فقط روی تصویر شما کار میکند، نه تصویر هزاران نفر دیگر.
یک پاداش هست که بیشتر مردم انتظارش را ندارند: چون کل ابزار فقط کد و دارایی است، یک مرورگر میتواند کشش کند. IMG.DIY یک PWA با یک service worker است، پس بعد از اولین بازدید ابزارها روی دستگاه شما ذخیره میشوند و آفلاین به کارشان ادامه میدهند — در حالت هواپیما، در یک هواپیما، هر جا. فشردهسازی و تبدیل اصلاً به اتصال نیاز ندارند.
بدهبستانها، صادقانه
پردازش درونمرورگری جادو نیست و بدون محدودیت هم نیست. دستههای خیلی بزرگ میتوانند به حافظه یک موبایل ردهپایین فشار بیاورند، چون کار از منابع دستگاه شما استفاده میکند نه یک مرکز داده. و چند ویژگی واقعاً به شبکه نیاز دارند — هر چیزی که یک سرویس بیرونی را فرا میخواند، مثل یک ممیزی سرعت صفحه، نمیتواند آفلاین اجرا شود. حذف پسزمینه یک حالت میانی است: بهصورت محلی اجرا میشود، اما فقط بعد از یک دانلود یکباره فایل مدل.
اما برای کارهای روزمره — فشردهسازی، تبدیل، تغییر اندازه، برش، چرخش — مرورگر حالا یک کارگاه تصویر کامل، خصوصی و سریع است که اتفاقاً در یک زبانه زندگی میکند. بدون آپلود، بدون سرور، بدون انتظار.