تشخیص چهره زنده و اعمال فیلترهای مختلف در جاوا اسکریپت | به زبان ساده

در این مقاله به بررسی روش پیاده‌سازی تشخیص چهره زنده و اعمال فیلترهای مختلف در جاوا اسکریپت می‌پردازیم. این فیلترها شبیه به قابلیت‌هایی است که در اپلیکیشن‌هایی مانند اینستاگرام یا اسنپ‌چت مشاهده کرده‌اید. در این پروژه برخی فیلترهای بسیار جذاب مانند ماسک اسپایدرمن، سایر شخصیت‌ها و غیره را امتحان خواهیم کرد.

تشخیص ویژگی‌های چهره

یک کتابخانه به نام clmtrackr در جاوا اسکریپت وجود دارد که برای تشخیص چهره روی تصویر استفاده می‌شود.

فیلم آموزش جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

این کتابخانه قابلیت یافتن اجزای چهره مانند بینی، گوش‌ها و غیره را نیز دارد. به طور کلی این کتابخانه مدل ژنریکی ارائه می‌کند که از پیش آموزش دیده و آماده استفاده است.

اگر تصویری را با این کتابخانه پردازش کنیم، یک آرایه برای هر نقطه روی نقشه بازگشت می‌دهد و هر نقطه به وسیله موقعیت‌های x و y مشخص می‌شود. اگر بخواهید هر چیزی را جایگزین کنید، می‌توانید از این نقطه‌ها کمک بگرید. در بخش بعدی یک پروژه جذاب را با استفاده از این کتابخانه می‌سازیم.

ساختمان ابتدایی کد

برای ساخت این اپلیکیشن از یک کتابخانه به نام p5.js استفاده خواهیم کرد. این یک کتابخانه جاوا اسکریپت است که به طور عمده برای کار با canvas طراحی شده است. این یک کتابخانه سنتی UI نیست، بلکه زمان ساخت UI در مواردی که نیاز به آپدیت دارد را تعریف می‌کند. این کتابخانه سه رویداد اصلی به شرح زیر دارد:

• Preload - این رویداد برای اجرای کتابخانه صحیحی که پیش و پس از ساخت هر UI روی صفحه بارگذاری می‌شود، مورد استفاده قرار می‌گیرد.
• Setup - این رویداد نیز یک بار و پس از رویداد preload یعنی زمانی که آماده ساخت UI اولیه هستیم، اجرا می‌شود.
• Draw – این تابعی است که درون یک حلقه فراخوانی می‌شود و هر بار که سیستم نیاز به رندر کردن صفحه داشته باشد اجرا خواهد شد.

Preload

اکنون از رویداد Preload برای بارگذاری تصویر در صفحه استفاده می‌کنیم. کد آن به صورت زیر است:

1function preload() {
2    // Spiderman Mask Filter asset
3    imgSpidermanMask = loadImage("https://i.ibb.co/9HB2sSv/spiderman-mask-1.png");
4    
5    // Dog Face Filter assets
6    imgDogEarRight = loadImage("https://i.ibb.co/bFJf33z/dog-ear-right.png");
7    imgDogEarLeft = loadImage("https://i.ibb.co/dggwZ1q/dog-ear-left.png");
8    imgDogNose = loadImage("https://i.ibb.co/PWYGkw1/dog-nose.png");
9}

ایجاد بوم

برای این که این بوم واکنش‌گرایی بیشتری پیدا کند، باید اندازه دینامیکی بر اساس اندازه صفحه داشته باشد. نسبت ابعادی برابر با 4:3 است. این گزینه ایده‌آلی نیست، اما مجبور هستیم برخی فرضیات را لحاظ کنیم تا کد بهینه باشد. اکنون باید یک بوم با تابع createCanvas کتابخانه P5.js به صورت زیر بسازیم:

1const maxWidth = Math.min(windowWidth, windowHeight);
2pixelDensity(1);
3outputWidth = maxWidth;
4outputHeight = maxWidth * 0.75; // 4:3
5
6createCanvas(outputWidth, outputHeight);

دریافت استریم ویدئو

در این مرحله بوم به درستی کار می‌کند و از این رو باید ویدئو را از طریق وب‌کم یا دوربین دریافت کنیم. تابع videoCapture در کتابخانه P5.js به این منظور تدارک دیده شده است.

1// webcam capture
2videoInput = createCapture(VIDEO);
3videoInput.size(outputWidth, outputHeight);
4videoInput.hide();

ساخت بخش انتخاب فیلتر

اکنون باید یک فیلتر بسازیم. برای فیلترها به گزینه‌های بیشتری نیاز داریم. ما می‌توانیم از یک تابع بازشدنی ساده برای این پروژه استفاده کنیم. به این منظور از تابع ()createSelect استفاده می‌کنیم:

1// select filter
2const sel = createSelect();
3const selectList = ['Spiderman Mask', 'Dog Filter']; // list of filters
4sel.option('Select Filter', -1); // Default no filter
5for (let i = 0; i < selectList.length; i++)
6{
7    sel.option(selectList[i], i);
8}
9sel.changed(applyFilter);

ساخت بخش دریافت تصویر

اکنون برای تهیه تصویر باید از image tracker استفاده کنیم که یک شیء برای فید ویدئو است و هر فریم را در چهره مشخص می‌سازد. این ترکر کافی است یک بار تنظیم شود:

1// tracker
2faceTracker = new clm.tracker();
3faceTracker.init();
4faceTracker.start(videoInput.elt);

رسم فیلترهای ویدئویی

به این منظور باید رویداد draw را در P5.js به‌روزرسانی کنیم. خروجی منبع ویدئویی روی بوم هر فیلتری که انتخاب شده باشد را اعمال می‌کند. در این مورد تابع رسم کاملاً ساده است. این تابع پیچیدگی‌های کار را به تعریف فیلتر واگذار می‌کند:

1function draw() {
2  image(videoInput, 0, 0, outputWidth, outputHeight); // render video from webcam
3
4  // apply filter based on choice
5  switch(selected)
6  {
7    case '-1': break;
8    case '0': drawSpidermanMask(); break;
9    case '1': drawDogFace(); break;
10  }
11}

ساخت فیلترها

ساخت فیلتر می‌تواند فرایندی ساده یا پیچیده باشد و این موضوع در عمل به فیلتری وابسته است که می‌خواهید بسازید. برای ساخت ماسک باید تصویر ماسک را به مرکز صفحه اضافه کنیم. ابتدا باید مطمئن شویم که شیء faceTracker با استفاده از تابع ()faceTraker.getCurrentPosition به درستی چهره را تشخیص داده است.

زمانی که چهره تشخیص داده شد، باید از P5.js برای رندر تصویر با استفاده از نقطه 62 چهره در مرکز تصویر استفاده کنیم. سپس عرض و ارتفاع را داریم که نمایش‌دهنده اندازه چهره است.

1const positions = faceTracker.getCurrentPosition();
2if (positions !== false)
3{
4    push();
5    const wx = Math.abs(positions[13][0] - positions[1][0]) * 1.2; // The width is given by the face width, based on the geometry
6    const wy = Math.abs(positions[7][1] - Math.min(positions[16][1], positions[20][1])) * 1.2; // The height is given by the distance from nose to chin, times 2
7    translate(-wx/2, -wy/2);
8    image(imgSpidermanMask, positions[62][0], positions[62][1], wx, wy); // Show the mask at the center of the face
9    pop();
10}

سخن پایانی

امیدواریم این مطلب باعث شده باشد که معلومات شما در مورد روش ساخت فیلتر با استفاده از کتابخانه جاوا اسکریپت ارتقا یابد. شما می‌توانید با کمی تلاش فیلترهای جالبی ایجاد کنید.

فیلم مجموعه آموزش جاوااسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید