استودیو فیلتر تصویر
روشنایی، کنتراست، سپیا، تاری و بیشتر را زنده اعمال کنید و رشتهی CSS آن را بردارید.
دربارهی استودیو فیلتر تصویر
موتور فیلتر canvas همان موتور فیلتر CSS است؛ بهمحض اینکه ctx.filter را روی grayscale(100%) بگذارید، ماتریس روشنایی 0.2126R + 0.7152G + 0.0722B اجرا میشود و قرمز خالص #FF0000 به rgb(54,54,54) تبدیل میشود، نه به خاکستری وسط. ترتیب فیلترها هم مهم است: blur(4px) saturate(200%) با saturate(200%) blur(4px) یک نتیجه نمیدهد. این ابزار هشت فیلتر را با ترتیب ثابت و مشخص اعمال میکند و دقیقاً همان رشتهای را که به کار برده نشان میدهد.
راهنمای استفاده از استودیو فیلتر تصویر
- 1
تصویر را روی کادر بالا بکشید یا کلیک کنید تا انتخاب شود؛ اگر عجله دارید همان چارت رنگ ۶۰۰×۴۰۰ که پیشفرض بارگذاری شده کافی است.
- 2
یکی از پیشتنظیمها — نوآر، قدیمی، رنگ زنده، محو، رؤیایی، نگاتیو یا نئون — را بزنید تا نقطهی شروع بگیرید.
- 3
هشت اسلایدر روشنایی، کنتراست، اشباع رنگ، سیاهوسفید، سپیا، چرخش رنگ، معکوس و تاری را تا رسیدن به نتیجهی دلخواه تنظیم کنید.
- 4
دکمهی «مقایسه با اصل» را بزنید تا بوم بین تصویر فیلترشده و تصویر دستنخورده جابهجا شود.
- 5
رشتهی filter را برای استفاده در استایلشیت کپی کنید یا خروجی را در ابعاد واقعی تصویر بهصورت PNG دانلود کنید.
پرسشهای متداول
سیاهوسفید کردن یعنی میانگین گرفتن از سه کانال رنگ؟
نه، و همین اشتباه رایج است. grayscale از ماتریس روشنایی استفاده میکند: 0.2126 قرمز + 0.7152 سبز + 0.0722 آبی. به همین دلیل قرمز خالص به rgb(54,54,54) و سبز خالص به rgb(182,182,182) تبدیل میشود، در حالی که میانگین ساده هر دو را ۸۵ میکرد. برای دیدنش کافی است چارت رنگ نمونه را بارگذاری کنید و اسلایدر سیاهوسفید را روی ۱۰۰ بگذارید.
رشتهی CSS دقیقاً همان چیزی را میسازد که در پیشنمایش میبینم؟
برای فیلترهای رنگی بله؛ brightness، contrast، saturate، grayscale، sepia، hue-rotate و invert مستقل از اندازهاند و همان مقدار پیکسل را میدهند. اما blur برحسب پیکسل است و به اندازهی رندرشدهی عنصر بستگی دارد: blur(5px) روی تصویری که در ابعاد واقعیاش نمایش داده شود با همان تصویر که در نصف اندازه رندر شده یکسان نیست.
تصویر من جایی آپلود میشود؟ محدودیت اندازه چقدر است؟
هیچ فایلی ارسال نمیشود؛ خواندن فایل، رسم روی canvas و ساخت PNG همه داخل مرورگر شما انجام میشود و این صفحه اصلاً درخواست شبکهای نمیفرستد. تنها محدودیت واقعی این است که اگر ضلع بلند تصویر بیشتر از ۲۴۰۰ پیکسل باشد، برای اینکه پیشنمایش زنده کند نشود کوچک میشود؛ بنابراین خروجی PNG هم حداکثر ۲۴۰۰ پیکسل خواهد بود.
چرا بعد از اعمال تاری، لبههای تصویر کمرنگ و شفاف میشوند؟
چون blur برای هر پیکسل از پیکسلهای اطرافش میانگین میگیرد و بیرون از مرز بوم چیزی جز شفافیت وجود ندارد. این رفتار استاندارد فیلتر است، نه ایراد ابزار. اگر لبهی تمیز میخواهید، بعد از دانلود چند پیکسل از هر طرف را برش بزنید یا مقدار تاری کمتری بگذارید.